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

第一种：已知元素宽、高

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