关于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%);
    }