在引导程序3.3.6中，将div内容集中在一列中

Question

我是bootstrap的新手，几天来我一直难以将一些内容集中在bootstrap中的列中。我想将文本上方的圆圈居中，并希望它在所有浏览器大小中保持居中（响应）。我尝试了数百种解决方案，但都没有奏效。有人帮忙吗下面是代码笔链接：

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;
}