在其父div中垂直居中多个div

Question

我在父元素中有一组元素.父元素的高度可以更改(它将被某些jQuery文件更改).以下是布局的外观:

 <div class = "parent">
     <div class="child1">
     </div>
     <div class="child2">
     </div> 
 </div>

我希望子元素最终在父div的中间对齐,但我无法弄清楚如何编写css来实现这一点.我试过写过这样的东西:

 .child1 {
        ...
       vertical-align: middle;
 }

哪个不起作用.我也尝试过:

 .parent {
       display:table;
 }
 .child1 {
       display:table-cell;
       vertical-align:middle;
 }

这也行不通.任何想法如何做到这一点？

Answer 1

您可以为要集中在容器中心的元素创建一个包装器,而不是这样:

HTML

 <div class ="parent">
     <div class="centerme">
        <div class="child1">
           ....
        </div>
        <div class="child2">
           ....
        </div>
      </div>
 </div>

然后你可以简单地这样做:

CSS

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
 }

演示.在CSS-tricks上找到的方法.

Answer 2

检查此链接：http : //www.jakpsatweb.cz/css/css-vertical-center-solution.html

这将使您的孩子 div 的顶部达到容器的 50%。只需添加 margin-top: -(x)px; 其中 (x) 是您孩子 div 高度的一半。