ブートストラップの列の中にdivコンテンツを集中させる3.3.6

Question

ブートストラップの新しい機能が追加されました。私はテキストの上にあるサークルを中心にしたいので、すべてのブラウザのサイズを中心にしておきたい（反応的）。私は何百ものソリューションを試しましたが、どれも成功しませんplsは誰もが下記の を助けるcodepenリンクです：

http://codepen.io/anon/pen/RaQvVE

といくつかのコードstackoverflowのが示唆したように（HTML）：

<div class="container"> 

      <div class="row"> 

      <div class="col-md-4 col-sm-6 col-xs-12"></div> 

      <div class="col-md-4 col-sm-6 col-xs-12 logo"> 

     <div class="star"> 
</div> 
<div class="moon center-block"> 
</div> 
<div class="moon2 center-block"> 
</div> 
       </div> 

      <div class="col-md-4 col-sm-6 col-xs-12"></div> 

       </div> 

     </div> 


     <div class="container"> 

      <div class="row"> 

      <div class="col-md-4 col-sm-6 col-xs-12"></div> 

      <div class="col-md-4 col-sm-6 col-xs-12"> 

     <div class="logo-text">UMBRA</div> 

       </div> 

      <div class="col-md-4 col-sm-6 col-xs-12"></div> 

       </div> 

     </div> 

Answer 1

ではなく、このHTMLを適用します。

 <div> 

      <div class="row"> 

      <div class="col-md-12 col-sm-12 col-xs-12"> 

        <div class="star center-block"> 
        </div> 
        <div class="moon center-block"> 
        </div> 
        <div class="moon2 center-block"> 
        </div> 
      </div> 

      </div> 
</div> 


     <div class="container"> 

      <div class="row"> 

      <div class="col-md-4 col-sm-6 col-xs-12"></div> 

      <div class="col-md-4 col-sm-6 col-xs-12"> 

       <div class="logo-text">UMBRA</div> 

      </div> 

      <div class="col-md-4 col-sm-6 col-xs-12"></div> 

      </div> 

     </div> 

をとこのCSS：

.logo { 
    display: table; 
    margin: 0 auto; 
} 

.star { 
    position: relative; 
    z-index: 2; 


    width: 98px; 
    height: 98px; 
    display: table; 
    margin: 0 auto; 
    border-radius: 50%; 
    background: #000; 

} 

.moon { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    display: table; 
    margin: 0 auto; 
    border-radius: 50%; 
    background: #fff; 
    z-index: 2; 
    top: -99px; 


    /*box-shadow: inset 0 0 50px rgba(150, 150, 150, 0.2); */ 

} 


.moon2 { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    display: table; 
    margin: 0 auto; 
    border-radius: 50%; 
    background: #fff; 
    z-index: 3; 
    top: -199px; 

    /*box-shadow: inset 0 0 50px rgba(150, 150, 150, 0.2); */ 

} 
.moon2:before { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    display: table; 
    margin: 0 auto; 
    border-radius: 50%; 
    position: absolute; 
    z-index: 6; 
    top: 0; 
    left: 0; 
    background: -webkit-linear-gradient(45deg, rgba(25,25,25,1)100%,rgba(255,255,255,1)80%); 
    background: linear-gradient(45deg, rgba(25,25,25,1)100%,rgba(255,255,255,1)80%); 
    background: -moz-linear-gradient(45deg, rgba(25,25,25,1)100%,rgba(255,255,255,1)80%); 


} 


.logo-text { 
    display: table; 
    margin:0 auto; 
    width: 100%; 
    text-align: center; 
    font-family: "Bicyclette-Regular"; 
    font-size: 40px; 
} 

.logo-text2 { 

    text-align: center; 
    width: 100%; 
    font-size: 15px; 
    font-family: 'Bicyclette-Regular'; 
    letter-spacing: 1px; 
    color: #999; 

}