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和{{强制1}}设置为right。

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

<强>标记

<强> CSS

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

一个工作示例

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>

如何在div中垂直对齐div？

2 个答案: