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 */
 }

Demo。在CSS-tricks找到的方法。

Answer 2

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

这将使您的孩子div达到容器的50％。只需添加margin-top： - （x）px;其中（x）是你孩子div高度的一半。

Answer 3

这比标准“我如何在父容器中垂直对齐单个div”稍微复杂一些。

如果您有一个需要垂直对齐的子元素的多个数字（可以更改）或者您的父容器的高度发生变化，那么您将需要使用Javsacript / JQuery来设置位置，因为没有“标准” “仅使用CSS将中间垂直对齐应用于父容器内的多个子元素的方法。 编辑：我被证明是错误的，你可以使用：在伪元素之前，但它在IE7中不起作用，除非你破解它。

我已经在一个小提琴中实现了这个：http://jsfiddle.net/rJJah/20/

关键部分

每个子元素都有一个position:relative。这很重要，因为某些子元素可能具有可变高度，这样就无需为每个子元素分别计算顶部位置。
每当您更改父容器的高度时，您都需要重新运行高度计算并为每个孩子设置顶部偏移量。

Answer 4

您忘记在child2上应用与child1相同的样式，如下所示：

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

这是一个jsfiddle：http://jsfiddle.net/D853q/1/

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

4 个答案: