Question

我想使用bootstrap 3在我的paga上自动居中一个div，但我无法实现它。我有一个图像（具有固定的响应高度），我希望文本居中（水平和垂直）

我做了一个靴子：https://www.bootply.com/4AyZFwlOdE

Answer 1

.vcenter {
   display: inline-block;
   vertical-align: middle;
   float: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.image {
    height:500px;
    background:yellow;
  }

<div class="image">
  <div class="container">
      <div class="row">
          <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
            <div style="text-align:center; height:3em;border:1px solid #F00">Small</div>
          </div>
      </div>
    </div>
  </div>

Answer 2

<div class="image">
  <div class="container">
      <div class="row align-items-center">
        <div class="col-xs-8  col-lg-8 col-md-offset-2" >
            <div style=" border:1px solid #F00;"><img src="http://www.dm-3.com/wp-content/uploads/2013/06/example.png" stlye="margin:0 auto"></div>
          </div>
      </div>
    </div>
  </div>

Answer 3

<强> CSS

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    line-height: 3em;
    text-align:center;
    height:3em;
    border:1px solid #F00;
}

.image {
    height:500px;
    background:yellow;
}

https://www.bootply.com/uAp4vN69nk

Answer 4

在下面的codepen链接中给出的对齐中心（水平和垂直）内容的不同方式：

.style2{
  display: table;
  width: 100%;
  height: 30vh;
  background-color: #8E113F;
  margin-bottom: 20px;
  div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
  }
}

https://codepen.io/kk2989/pen/LNjojY

在Bootstrap 4中垂直居中一个div

4 个答案: