css垂直居中的几种方法

1、单行文本居中

html

content

css

p {
height: 30px;
line-height: 30px;
}

要点：height和line-height值保持一致

用处： button、图片、单行文本内容居中

局限：无法用于多行元素

2、div容器固定高度居中

html

first paragraph

second paragraph

css

wrapper {

height: 200px;
width: 300px;
background: #ccc;
position: relative;
}
.container {
height: 100px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; //height的一半
margin-left: -100px; //width的一半
background: #f00;
}

如图

要点：给要居中的容器设置position: absolute，top: 50%，margin-top: -height/2（即高度的一半）（水平居中同上）

用处： 多行元素居中对齐，用于页面在最中间的布局

局限：需要固定的高度（即大小要确定）、父元素需要相对定位；当内容大于height时，内容溢出，无法居中；如果overflow:auto，会出现滚动条，如果overflow:hidden，内容被切断

3、模拟表格居中

html

first paragraph

second paragraph

css

wrapper {

height: 200px;
display: table;
background-color: #f00;
}
.container {
display: table-cell;
vertical-align: middle;
}

如图

要点：父元素display: table，当前元素display: table-cell，并设置vertical-align: middle

用处：用于高度可以随内容动态改变

局限：不支持IE6-7

4、容器前添加空div

html

css

wrapper {

height: 200px;
background-color: #ccc;
}
.empty {
height: 50%; //相对于父元素的一半
margin-bottom: -50px; //.container的height的一半
}
.container {
height: 100px;
background-color: #f00;
}

如图

要点：在容器前添加空div，并为其设置height: 50%（父元素高度一半），margin-bottom为容器高度一半

用处和局限同方法2