标签：
第一种：已知元素宽、高
兼容：IE6+
源码：
<title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; /*css使元素垂直居中*/ position: relative; } .box .center{ width: 100px; height: 100px; background-color: #B5C8E8; /*css使元素垂直居中*/ position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } </style> <div class="box"> <div class="center"></div> </div>
demo：
第二种：元素宽、高未知
兼容：IE8+
源码：
<title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; /*css使元素垂直居中*/ display: table; } .box .center{ width: 100px; text-align: center; background-color: #B5C8E8; /*css使元素垂直居中*/ display: table-cell; vertical-align: middle; } </style> <div class="box"> <div class="center">我要居中</div> </div>
demo：
要兼容IE6/7，需增加一个div，这个方法比较巧妙，利用了left、top的百分比值是相对于父元素的宽度这点特性
<title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; /*css使元素垂直居中*/ display: table; /*兼容IE6、7*/ *position: relative; } .table-cell{ /*css使元素垂直居中*/ display: table-cell; vertical-align: middle; /*兼容IE6、7*/ *position: absolute; *left: 50%; *top: 50%; } .box .center{ width: 100px; text-align: center; background-color: #B5C8E8; /*css使元素垂直居中*/ display: table-cell; vertical-align: middle; /*兼容IE6、7*/ *position: relative; *left: -50%; *top: -50%; } </style> <div class="box"> <div class="table-cell"> <div class="center">请在IE6/7下查看此demo</div> </div> </div>
demo：
第三种：已知元素宽、高，需要借助一个div将上面的空间撑开
兼容：IE6+
源码：
<title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; /*css使元素垂直居中*/ } .box .center{ width: 100px; height: 100px; background-color: #B5C8E8; margin: 0 auto; text-align: center; /*css使元素垂直居中*/ } .box .floater{ height: 50%; /*设置下外边距为要居中的元素的高度的一半*/ margin-bottom: -50px; } </style> <div class="box"> <div class="floater"></div> <div class="center"></div> </div>
demo：
第四种：元素宽、高未知，需要借助另一个元素的高度来实现居中，利用了vertical-align:middle的特性。
兼容：IE6+
源码：
<title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; text-align: center; /*css使元素垂直居中*/ } .box .center{ background-color: #B5C8E8; /*css使元素垂直居中*/ display: inline-block; vertical-align: middle; /*兼容IE6、7*/ *display: inline; *zoom: 1; } .box .reference{ display: inline-block; vertical-align: middle; height: 100%; /*兼容IE6、7*/ *display: inline; *zoom: 1; } </style> <div class="box"> <div class="reference"></div> <div class="center">我要居中</div> </div>
demo：
第五种：元素宽、高未知，设置父元素相对定位，该元素绝对定位，margin: auto;且距离四个方向的距离都为0；这种方法会使该元素铺满它的父元素。
兼容：IE8+
源码：
<title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; text-align: center; /*css使元素垂直居中*/ position: relative; } .box .center{ width: 100px; height: 100px; background-color: #B5C8E8; /*css使元素垂直居中*/ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> <div class="box"> <div class="center"></div> </div>
demo：
第六种：元素宽、高未知，利用了translate内的百分比是相对于元素本身的宽高这个特性。
兼容：IE9+
源码：
<title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; text-align: center; /*css使元素垂直居中*/ } .box .center{ background-color: #B5C8E8; /*css使元素垂直居中*/ position: relative; left: 50%; top: 50%; /*translate内的百分比是相对于元素本身的宽高*/ transform: translate(-50%, -50%); } </style> <div class="box"> <div class="center">我要居中</div> </div>
demo：
注：以上几种方法中，所有用到的额外的元素在不考虑IE6、7的情况时可用伪元素代替。
标签：
原文地址：http://www.cnblogs.com/wangmeijian/p/4922144.html
