元素居中

Posted 2020-09-02 不屈的yizhi

行内元素的水平居中

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

行内元素的垂直居中

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

　　2.多行文本：

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

 1  　　　　.box{
 2             display: table-cell;
 3             width: 200px;
 4             height: 600px;
 5             border:1px solid #3c3c3c;
 6             vertical-align: middle;
 7         }
 8         .box>span{
 9             display: inline-block;
10             vertical-align: middle;
11         }

3.图片水平垂直居中

1  <div class="box">
2         <img  style="" src="http://n1.itc.cn/img7/adapt/wb/sohulife/2016/12/19/148210538955786000_720_1000.JPEG" alt="">
3 </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;
        }