html - 如何在一个div中垂直对齐一个div？

Question

margin: 0 auto;只要它们都具有除 以外的宽度属性，就可以在另一个 div 元素中水平对齐 div 元素auto，但这不适用于垂直对齐。

如何在另一个 div 中垂直对齐一个 div？

Answer 1

基于不同的想法，有许多不同的方法。鉴于元素具有固定的高度（以 px、% 或你有什么表示），到目前为止我找到的最佳解决方案是基于以下原则：

给父 divposition: relative;和子 div position: absolute;，以使子绝对相对于父定位。

对于孩子，设置top、bottom和to 。鉴于孩子也有一个固定的并且小于父母的大小，这将使浏览器陷入不可能的境地。leftright0widthheight

margin: auto;作为浏览器的救世主，在孩子身上。浏览器现在可以在所有边上添加足够的边距以让子元素保持其大小，但仍然填充整个父元素，如top,bottom和left设置right为0。

太棒了！元素在父元素中垂直和水平对齐。

标记

<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>
​