How to center icons in bootstrap?

Question

JavaScript

Can't center icons on the screen. Offset is not an option, margin: 0 auto doesn't work. I will be grateful for help.

<div id="header" class="container-fluid">
    <div class="row">
      <div class="col-xs-offset-2 top_menu_row1">
        <div class="col-xs-4 col-sm-4 top_menu_icon1 top-menu-icon-all">
          <div class="text_icon_name">Brands</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon2 top-menu-icon-all">
          <div class="text_icon_name">Education</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon3 top-menu-icon-all">
          <div class="text_icon_name">Categories</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-offset-2 top_menu_row2">
        <div class="col-xs-4 col-sm-4 top_menu_icon4 top-menu-icon-all">
          <div class="text_icon_name">Books</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon5 top-menu-icon-all">
          <div class="text_icon_name">E-books</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon6 top-menu-icon-all">
          <div class="text_icon_name">Trending</div>
        </div>
      </div>
    </div>

.top_menu_icon1, .top_menu_icon2, .top_menu_icon3, .top_menu_icon4, .top_menu_icon5, .top_menu_icon6{
  background: url(../img/drawable-ldpi/sprites.png) no-repeat;
}

.top_menu {
  display: inline-block;
  position: relative;
}

.top-menu-icon-all {
  width: 36px;
  height: 36px;
  padding-bottom: 50px;
  padding-right: 65px;
  cursor: pointer;
  z-index: 100;
  position: relative;
}

.top_menu_icon1{
  background-position: -208px -56px ;	
}

.top_menu_icon2{
  background-position: -307px -56px ;
}

.top_menu_icon3{
  background-position: -407px -57px ;
}

.top_menu_icon4{
  background-position: -209px -107px ;
}

.top_menu_icon5{
  background-position: -308px -108px ;
}

.top_menu_icon6{
  background-position: -407px -108px ;
}

Answer 1

split method? This will turn out to be an array, you can divide it into variables through destructuring, but you will have to specify the variables fixedly
the rest can be hidden in an array

let [word1, word2, ...otherWords] = 'фраза 1 | фраза 2 | фраза 3'.split('|');