垂直居中 CSS 规则适用于行，但不适用于 bootstrap3 中的列

Question

我正在尝试使用以下 CSS 规则将 bootstrap 中的内容垂直居中对齐 3 -

.center {
   display:flex;
   align-items:center !important;
   background-color:red;
   text-align:center;     
}

@media ( min-width:768px ) {
  .center {
     display:flex;
     align-items:center !important;
     background-color:red;
     text-align:center;     
   }
}

@media ( min-width: 992px ) {
  .center {
   display:flex;
   align-items:center !important;
   background-color:red;
   text-align:center;     
  }
}
@media ( min-width: 1200px ) {
.center {
    display:flex;
    align-items:center !important;
    background-color:red;
    text-align:center;     
  }
}

还有，这是我的 html

<div class="row center"> <!--if .center is here valign works-->
  <div class="col-sm-4"> <!--if .center is here valign doesn't work-->
     test
  </div>    
<div class="col-sm-8 ">
  test </br>
  test </br>
  test </br>
</div>

您可以在 codepen.io.

中找到它

有什么帮助吗？

Answer 1

您可以通过两种方式执行此操作。

使用绝对位置
使用显示：table

使用绝对位置

DESC: 给父元素{{position:relative}}和子元素（要居中的元素）作为

{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

使用 TABLE 块

DESC：将父元素指定为 display:table;width:100%，将第二个父元素指定为 display:table-cell;vertical-align:middle;

注意*：{table-row} 的高度应大于其内容。

垂直居中 CSS 规则适用于行，但不适用于 bootstrap3 中的列

Vertically center CSS rule works for row but not for column in bootstrap3

twitter-bootstrap-3

vertical-alignment