如何垂直对齐div中的div？

Question

水平对齐另一个div元素中的div元素可以使用margin: 0 auto;创建，只要它们的宽度属性不是auto，但这不适用于垂直对齐。

如何垂直对齐另一个div内的div？

Answer 1

根据不同的想法，有很多不同的方法。鉴于元素具有固定的高度（以px，％或你有什么），我迄今发现的最佳解决方案基于以下原则：

给父div position: relative;和子div position: absolute;，使孩子的绝对位置与父母有关。

对于孩子，设置top, bottom, left和right到0。鉴于儿童的固定的width和height小于父母的大小，这将推动浏览器成为不可能的情况。

对于孩子来说margin: auto;，作为浏览器的救星。浏览器现在可以在所有方面添加足够的边距，以便让子元素保持其大小，但仍需填写整个父元素，如top，bottom，left和right设置为0。

TADAAA！元素在父级中垂直和水平对齐。

标记

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS

​.parent { 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100px; 
    height: 100px; 
} 

工作示例

http://jsfiddle.net/sg3Gw/

Answer 2

我觉得最容易使用display:table-cell; vertical-align:middle;这里有一个jsfiddle

<style> 
.a { 
    border:1px solid red; 
    width:400px; 
    height:300px; 
    display:table-cell; 
    vertical-align:middle; 
} 
</style> 
<div class="a"> 
    <div>CENTERED</div> 
</div> 
​