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

我有一组父元素内的元素。父元素的高度可以改变（它会被一些jQuery文件改变）。下面是布局的外观：垂直居中多个div在其父div中

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

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

来源

2012-03-08 jay

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

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

来源

2012-03-08 19:07:04

感谢您的输入，但是这对准的上缘div至50％大关，而不是div的中间。有没有办法解决这个问题？ – jay 2012-03-08 19:30:59

我发现了一个解决方案，我只是做margin-top：-10px;或相应地将其调整为子div高度的一半。想要将这一点添加到您的答案？如果是的话，我很乐意将此标记为答案。 – jay 2012-03-08 19:37:41

这比您的标准稍微复杂一点“如何垂直对齐父容器内的单个div”。

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

我的小提琴实现这一点：http://jsfiddle.net/rJJah/20/

关键零部件

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

来源

2012-03-08 19:32:11 t0nyh0

这可能工作，但另一种解决方案是纯CSS，我更喜欢。虽然谢谢！ – jay 2012-03-08 19:36:40

我明白。请注意，虽然其他解决方案在IE7中无法正常工作，因为IE7无法识别：在伪元素之前。 – t0nyh0 2012-03-08 19:43:08

您可以为您想的是被中心，而不是像这样一个容器内居中的元素创建一个包装：

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。

来源

2012-03-08 19:33:21

你忘了上的child2应用相同的造型上child1，就像这样：

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

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

来源

2012-03-08 19:42:55

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

回答

相关问题