關於HTML+CSS里居中的一些問題

關於HTML+CSS里居中的一些問題

多行文字垂直居中

塊裏的多行文字垂直居中，需要設置單行文字的屬性line-height，其值等於height。這樣塊裏的多行文字就可以垂直居中了。

DIV塊的垂直居中CSS設置

已知高寬 div 垂直居中的方法
方法一：

<div id="div1">
    div1
</div>

  #div1{
        background-color: red;
        width: 400px;
        height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;    /*高的負的一半*/
        margin-left: -200px;    /*寬的負的一半*/
    }

方法二：

<div id="div2">
    <ul>
        <li><span>div2 1</span></li>
        <li><span>div2 2</span></li>
        <li><span>div2 3</span></li>
        <li><span>div2 4</span></li>
        <li><span>div2 5</span></li>
    </ul>
</div>

#div2{
        background-color: #cccccc;
        width: 200px;
        height: 200px;
        margin: auto;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
    }

display:flex;的居中效果設置

<div id="div3">
     <div id="a">div3——display:flex;1</div>
     <div id="b">div3——display:flex;2</div>
     <div id="c">div3——display:flex;3</div>
</div>

 #div3{  /*父容器*/
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction:row;   /*item元素繼承，水平方向排列*/
        justify-content:center;  /*居中顯示*/
    }
    #a,#b,#c{/*item 元素*/
        background-color:#7bcc87;
        width: 200px;
        height: 200px;
        margin-left: 32px; /*子元素之間的間隔*/
    }

圖片居中自適應

<div id="imgContent">
    <img src="images/reg-top.jpg" id="img"/>
</div>

#imgContent{
        position: relative;
    }
    #imgContent{
        position: absolute;
        top: 0;      /*註釋掉top設置就可水平垂直居中*/
        left: 50%;
        transform: translateX(-50%);
    }