css实现垂直居中方法

 

 

1.父亲元素高度不确定

使用padding撑开容器，使得元素居中

<div class="wrap">
<div class="content">content</div>
</div>

 .wrap{ padding:100px; border:1px solid #999;}

2.父亲元素高度确定

使用line-height属性

css样式

.wrap{ height:100px; border:1px solid #999;}
.content{ line-height:100px;}

3.子元素高度确定

通过绝对定位设置top为父亲元素50%，负外边距为自身高度的一半

.wrap{ height:400px; border:1px solid #999; position:relative;}
.content{height:100px; width:100px;border:1px solid #999; position:absolute; top:50%; margin-top:-50px; }

4.子元素跟父亲元素高度都不确定

不过这个方法只在IE8+有效

.wrap{ position:relative;}
.content{position:absolute; left:0; right:0; margin:auto; top:0; bottom:0;  }

5.设置父元素display:table,子元素display:table-cell

.wrap{
height:300px;
display:table;
border:1px solid #999;}
.content{
display:table-cell;
vertical-align:middle;}