1、絕對定位居中（子元素需設置寬高）

• > 原理：元素在過度受限情況下，將margin設置為auto，瀏覽器會重算margin的值，過度受限指的是同時設置top/bottom與height或者left/right與width。

內容塊的父容器：

position:relative;

子元素： （必須設置高度）

position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin:auto;

2、絕對定位配合margin（子元素需設置寬高）

• > 原理：top：50%元素上邊界位於包含框中點，設置負外邊界使得元素垂直中心與包含框中心重合；

第一種

<style>
　　.one{
　　　　border: 1px solid red;
　　　　width: 200px;height: 200px;
　　　　position: relative;
　　}
　　.two{
　　　　background: red;
　　　　width: 100px;height: 100px
　　　　position: absolute;left: 50%;top:50%;
　　　　margin: -50px 0 0 -50px;   //（margin設置百分比是相當於自身的高度與寬度）
　　}
</style> 
<div class="one">
　　<div class="two"></div> 
</div>
 

第二種

<style>
    .one{
    　　border: 1px solid red;
    　　width: 300px;height: 300px;
    　　position: relative;
    }
    .two{
        position:absolute;
        top:50%;
        left:0;
        right:0;
        margin:auto;
        margin-top:-100px; //（margin設置百分比是相當於自身的高度與寬度）
        width:200px;
        height:200px;
        background: red;
    }
 
</style>
<div class="one">
    <div class="two"></div>
</div>                    

3、table-cell方式（子元素不需設置寬高）

• > 原理：利用表格布局的特點，vertical-align設置為middle;單元格中的內容與所在行中間對齊

父容器：（設置寬高）

display:table-cell;text-align:center;vertical-align:middle;

子元素：

display:inline-block;vertical-align:middle;

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        display:table-cell;vertical-align:middle;text-align: center;
    }
    .two{
        background: red;
        (1)display:inline-block;(用此方法向上偏差2px)
        (2)margin:auto（垂直水平居中）
    }
</style>
<div class="one">
    <div class="two">11111111111</div>
</div>

4、通過添加空span標簽使圖片居中（子元素需設置寬高）
父容器：

text-align: center;

<span>：

display: inline-block;  //將行內元素改變為行內塊元素顯示
width: //1px; 實現ＩＥ下可讀效果
height: 100%; //使用元素高度和圖片容器高度一樣
vertical-align: middle; //垂直對齊

圖片：

vertical-align: middle;

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        text-align: center;
    }
    span{
        display: inline-block;
        width: 1px;
        height: 100%;
    vertical-align: middle;
    }
</style>
<div class="one">
    <span></span>
    <img src="../img/jian.png" >
</div>

5、外邊距margin取負數，大小為width/height（不使用box-sizing: border-box時包括padding，）的一半，再加上top: 50%; left: 50%;。
（子元素需設置寬高）

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        position: relative;
    }
    .two{
        background: red;
        width: 30px;
        height: 20px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -35px; /* (width + padding)/2 */
        margin-top: -30px; /* (height + padding)/2 */
    }
</style>
<div class="one">
    <div class="two"></div>
</div>    

6、內容定義transform:translate(-50%,-50%),並且加上top：50%；left：50%。（子元素需設置寬高）

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        position: relative;
    }
    .two{
        background: red;
        width: 50%;
        height: 30%;
        margin: auto;
        position: absolute;
        top: 50%; left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>
<div class="one">
    <div class="two"></div>
</div>

7、增加額外子元素設置margin-bottom為內容元素的高度+padding的一半。（不能實現水平垂直居中，僅垂直居中）

• > 原理與2方法類似，floater的下邊界是包含框的中心線，負下外邊界保證center的中心線與包含框中心線重合

<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
    }
    .floater{
        float: left;
        height: 50%;
        width: 100%;
        margin-bottom: -10%;
    }
    .two{
        clear: both;
        height: 20%;
        background: red;
    }
</style>
<div class="one">
    <div class="floater"></div>
    <div class="two"></div>
</div>

8、inline-block方式（子元素不需設置寬高）

• > 原理：為同一行的inline-block元素設置vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。

<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        text-align: center;
    }
    .one:after{
        content: ‘‘;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    .two{
        background: red;
        display:inline-block;
        vertical-align:middle;
    }
</style>
<div class="one">
    <div class="two">11111111111111111111</div>
</div>

9、彈性盒式布局（子元素不需設置寬高）
[CSS彈性盒][1]
第一種

<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .two{
        background: red;
    }
</style>
<div class="one">
    <div class="two">111111111111</div>
</div>    

第二種

<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        display: flex;
    }
    .two{
        background: red;
        margin:auto;
    }
</style>
<div class="one">
    <div class="two">111111111111</div>
</div>

CSS實現垂直居中水平居中