首页 > 代码库 > CSS 使元素垂直居中
CSS 使元素垂直居中
重点内容:负外边距，绝对垂直居中，box
拓展点：设置inline-block,使元素居中
1.实现文字居中对齐
水平居中：text-align:center
垂直居中：设置line-height和height一样
2.实现元素居中对齐
使用元素定位，并移动元素
方法1：负外边距法（兼容IE）
原理：使用绝对定位，定位元素left和top值都为50%；然后使用margin移动负的元素半宽高
条件：需要知道当前元素的宽高。
代码：
#content1{
position: relative;
width: 400px;
height: 400px;
background: red;
}
#sub1{
position: absolute;
width: 150px;
height: 150px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
background:#ff8;
}
方法2：负外边距的变形----使用transform来移动元素
原理：同样设置left和top值为50%；然后设置元素的transform:translate(-50%,-50%);
条件：需要知道父元素的宽高
优缺点：当前被居中元素的宽高可以未知
缺点，IE8及以下版本不支持transform属性
代码：
#content2{
position: relative;
width: 400px;
height: 400px;
background: #00ffff;
}
#sub2{
position: absolute;
min-height: 200px;
min-width: 200px;
top: 50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#ff8;
}
改变元素的display
方法3：display设为table-cell
原理：设置了table-cell后，此元素会作为一个表格单元格显示（类似 <td> 和 <th>）；然后可以使用vertical-align使被包含元素垂直居中。
再设置被包含元素的margin：0 auto；
缺点：父元素定义为table-cell后，不能使用margin:0 auto水平居中
代码：
#content3{
width: 400px;
height: 400px;
background: #ff8;
display:table-cell;
vertical-align: middle;
text-align: center;
}
#sub3{
Margin:0 atuo;
background: #00ffff;
}
方法4：display设为box
原理：设置了box后，可以使用box-align和box-pack是元素垂直水平居中。
缺点：IE不支持该属性值
代码：
#content4{
width: 400px;
height: 400px;
background: #00ffff;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align:center;
-moz-box-align:center;
box-align:center;
-webkit-box-pack:center;
-moz-box-pack:center;
box-pack:center;
}
#sub4{
max-width:300px;
max-height:300px;
background:#ff8;
}
其他方法
方法5：绝对定位居中(Absolute Centering)技术
原理：设置margin:auto，position:absolute；并设置left，right，top，bottom重绘内容块
缺点：
用途：
1）设置元素在父元素中居中，只需要将父元素的position:relative
div.box{
position: relative;
width: 200px;
height: 200px;
background: #ff8;
}
div.sub{
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
2）让元素一直停留在可视区中，只需要设置position:fixed，并设置z-index为一个大的值。
div.sub{
position: fixed;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 9999;
}
注意:fixed是相对于浏览器窗口进行定位
3）将内容块固定于左侧，右侧，等。只需要这样设置left:auto,right:0：这样会使内容块固定在右侧中部
div.sub{
position: absolute;
margin: auto;
left: auto;
right: 0;
bottom: 0;
top: 0;
}
4）对内容块为图片时，是适用的；
对内容块的width和height值为百分比时，也是适用的。
5）特别的效果：如果只是设置同一直线上一个方向的的padding，即设置了左内边距和上内边距，不管内边距值为多少，内容块大小都不会大于父元素。
div.sub{
position: absolute;
max-width: 100px;
max-height: 100px;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
padding-left: 150px;
padding-top: 150px;
}
方法6： 行内块元素（Inline-Block）
代码：
div.box:after,.sub{
display: inline-block; /*定义成inline-block*/
vertical-align: middle;
}
div.box{
text-align: center;/*使元素水平居中*/
overflow: hidden;
width: 200px;
height: 200px;
background: #ff8;
}
div.box:after{
content: "";
height: 100%;
/*margin-left: -0.25em;*/
background: #000;
}
.sub{
/*max-width: 99%;*/
}
代码地址：http://benlai.sinaapp.com/code/css/css_center_vertical.html
参考地址：http://blog.csdn.net/freshlover/article/details/11579669
CSS 使元素垂直居中