纯CSS实现垂直水平居中的5种方式

1.绝对定位+margin：auto+left: 0; right: 0; top: 0; bottom: 0;

css部分

<style type="text/css">    .wrp {        background-color: #b9b9b9;        width: 240px;        height: 160px;        position: relative;     }    .box{        color: #fff;        background-color: #3e8e41;        width: 200px;        height: 120px;        margin: auto;        position: absolute;        left: 0; right: 0; top: 0; bottom: 0;    }    </style>

页面布局

<div class="wrp">    <div class="box">        <p>我是大美女</p>     </div></div>

效果：

2、绝对定位+margin反向偏移

<style type="text/css">    .wrp {        background-color: #b9b9b9;        width: 240px;        height: 160px;        position: relative;     }    .box{        color: #fff;        background-color: #3e8e41;        width: 200px;        height: 120px;        position: absolute;        top: 50%; left: 50%;        margin-left: -100px; /* (width + padding)/2 */        margin-top: -60px; /* (height + padding)/2 */    }    </style>

布局：

<div class="wrp">    <div class="box">        <p>我是大美女</p>     </div></div>

效果：

3.绝对定位+transform反向偏移

<style type="text/css">    .wrp {        background-color: #b9b9b9;        width: 240px;        height: 160px;        position: relative;     }    .box{        color: #fff;        background-color: #3e8e41;        width: 200px;        height: 120px;        position: absolute;        top: 50%; left: 50%;        -webkit-transform: translate(-50%, -50%);        -ms-transform: translate(-50%, -50%);        transform: translate(-50%, -50%);    }    </style>

布局：

<div class="wrp">    <div class="box">        <p>我是大美女</p>     </div></div>

效果：

4.display：tabel

css部分：

<style>    /*** .table和.cell都将撑满页面，cell的子元素水平垂直居中 ***/    .table{        display: table;        width: 200px;        height: 200px;    }    .cell {        display: table-cell;        vertical-align: middle;        text-align: center;        border: 1px solid #666;    }    </style>

布局：

<div class="table">    <div class="cell">       <p>我爱你，我爱你</p>       <p>我爱你，我爱你</p>       </div></div>

效果：

5、display: flex

<style>    .flex{        display: flex;        width: 200px;        height: 200px;background: #ccc;        justify-content:center;         align-items: center;    }    .box {        background: red;        height: 50px;        width:100px;        color:#fff;    }    </style>

布局：

<div class="flex">    <div class="box">       我是大美女    </div></div>

效果：

可能还有其他方式，之后再做补充！