1.固定寬度水平居中:

div{
    width:1190px;
    margin:0 auto;
}

2.文字居中

2.1 單行文字

水平居中:

{
    text-align:center;
}

垂直居中：

{
    line-height:容器的高度
}

2.2 多行文字

css樣式：

.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
    width:100px;
    height:200px;
}
.child{
    display: inline-block;
    background: lightblue;
}
 

div結構：

<div class="parent">
    <div class="child">測試文字測試文字測試文字測試文字</div>
</div> 

3.圖片居中

3.1 line-height

css樣式：

.parent{
    width:200px;
    text-align: center;
    line-height: 500px;
    background-color: gray;
}
.child{
    vertical-align: middle;
}

div結構：

<div class="parent" >
    <img class="child" src="http://192.168.4.67:8080/scssui/skin1/image/logo.png" width="50%" alt="test">
</div>  
 

3.2 table-cell

css樣式：

.parent{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background: #ccc;
    width:500px;
    height:400px;
}
.child{
    vertical-align:middle;
}

div結構：

<div class="parent" >
    <img class="child" src="http://192.168.4.67:8080/scssui/skin1/image/logo.png" alt="test">
</div> 
 

4.在一個100%的容器內實現水平與垂直方向居中

4.1 transform（寬高固定及不固定的情況都適用）

Internet Explorer 10、Firefox、Opera 支援 transform 屬性。
Internet Explorer 9 支援替代的 -ms-transform 屬性（僅適用於 2D 轉換）。
Safari 和 Chrome 支援替代的 -webkit-transform 屬性（3D 和 2D 轉換）。
Opera 只支援 2D 轉換。

css樣式：

.mask{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: rgba(0,0,0,.5);
}
.mask-c{
    position: absolute;
    width: 500px;
    height:600px;
    top:50%;
    left:50%;
    background: #fff;
    border-radius: 8px;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);/*ie9*/
    -webkit-transform:translate(-50%,-50%);
}

div結構：

<div class="mask">
    <div class="mask-c">
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
    </div>
</div>

4.2 flex（寬高固定及不固定的情況都適用）

支援IE10+

css樣式：

.mask{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: rgba(0,0,0,.5);
    display:flex;
    display: -webkit-flex; /* Safari */
    align-items:center;/*垂直居中*/
    justify-content: center;/*水平居中*/
}
.mask-c{
    width:500px;
    height:300px;
    background: #fff;
}

div結構

<div class="mask">
    <div class="mask-c">
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
    </div>
</div>

擴充套件：使用felx使內容水平垂直居中

css樣式：

.parent {
    display:flex;
    display: -webkit-flex; /* Safari */
    height: 200px;
    background: #ddd
}
p{
    border:1px solid #f00;
    margin:0;
    padding:0;
    width:25%;
    display:flex;
    display: -webkit-flex; /* Safari */
    align-items:center;/*垂直居中*/
    justify-content: center;/*水平居中*/
}

div結構：

<div class="parent">
    <p>我是通過flex的水平垂直居中噢我是通過flex的水平垂直居中噢我是通過flex的水平垂直居中噢我是通過flex的水平垂直居中噢</p>
    <p>我是通過flex的水平垂直居中噢</p>
    <p>居中</p>
    <p>我是通過flex的水平垂直居中噢</p>
</div>

4.3 使用定位（適用於寬高固定的情況）

css樣式：

.mask{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: rgba(0,0,0,.5);
}
.mask-c{
    position:absolute;
    top:50%;
    left:50%;
    width:500px;
    height:400px;
    margin-left:-250px;
    margin-top:-200px;
    background:#fff;
}

div結構：

<div class="mask">
    <div class="mask-c">
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
        <p>測試彈出框垂直居中的問題</p>
    </div>
</div>