【整理】如何使元素水平垂直居中

第一种：已知元素宽、高

兼容：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：