元素居中

行内元素的水平居中

　　1.div{text-align:center} /*DIV内的行内元素均会水平居中*/

行内元素的垂直居中

　　1.单行文本：div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ 

　　2.多行文本：

<div class="box">
       <span>多行文本</span>
</div>

 　　　　.box{
            display: table-cell;
            width: 200px;
            height: 600px;
            border:1px solid #3c3c3c;
            vertical-align: middle;
        }
        .box>span{
            display: inline-block;
            vertical-align: middle;
        }

3.图片水平垂直居中

 <div class="box">
        <img  style="" src="http://n1.itc.cn/img7/adapt/wb/sohulife/2016/12/19/148210538955786000_720_1000.JPEG" alt="">
</div>

 .box{
            width: 200px;
            height: 600px;
            border:1px solid #3c3c3c;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .box>img{
            width: 180px;
        }

.box{
            width: 200px;
            height: 600px;
            border:1px solid #3c3c3c;
            position: relative;

        }
        .box>img{
            position: absolute;
            top:0;
            bottom: 0;
            left:0;
            right:0;
            width: 180px;
            margin: auto;
        }

 .box{
            width: 200px;
            height: 600px;
            border:1px solid #3c3c3c;
            position: relative;

        }
        .box>img{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width: 180px;
        }

多元素垂直居中对齐(元素之间)

<div class="box">
        <div class="chunk">1223</div>
        <div class="chunk">5788</div>
        <img  style="" src="http://n1.itc.cn/img7/adapt/wb/sohulife/2016/12/19/148210538955786000_720_1000.JPEG" alt="">
    </div>

 .box{
            width: 200px;
            height: 600px;
            border:1px solid #3c3c3c;
            text-align: center;
        }
        .chunk{
            background: red;width: 40px;height: 50px;
            display: inline-block;
            vertical-align: middle;
        }
        .box img{
            width: 80px;
            display: inline-block;
            vertical-align: middle;
        }