CSS子元素在父元素中水平垂直居中的幾種方法

1. 水平居中(margin: auto;)子父元素寬度固定，子元素上設置 margin: auto; 子元素不能設置浮動，否則居中失效。

        #div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #div1 p {
            width: 100px;
            height: 100px;
            background-color: green;

            /*float: left;    !*如果設置了浮動，則自動居中就會失效。*!*/
            margin: 0 auto;
        }

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

 

2. 水平居中，子父元素寬度固定，父元素設置 text-align: center; 
子元素設置 display: inline-block; 子元素不能設置浮動，否則居中失效。 
如果將元素設置為 inline , 則元素的寬高設置會失效，這就需要內容來撐起盒子

       #div2 {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            /*position: relative;*/
            text-align: center;
        }
        #div2 p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;

            /*float: left;     !*如果設置了浮動，則自動居中就會失效。*!*/
            display: inline-block;
            /*display: inline;*/
            /*display: inline-flex;*/
        }    

        <div id="div2">
            <h4>其他內容</h4>
            <p></p>
            <h3>其他內容</h3>
        </div>    

 

1. 水平垂直居中，子元素相對於父元素絕對定位， 
子元素top，left設置為50%，子元素margin的top，left減去自身高，寬的一半。

        #div3 {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            position: relative;
        }
        #div3 p {
            width: 100px;
            height: 100px;
            background-color: green;

            /*margin-top: 10%;      !*百分比相對於父元素*!*/
            /*padding-top: 10%;        !*百分比相對於父元素*!*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }

        <div id="div3">
            <p></p>
            <h3>其他內容</h3>
        </div>

 

2. 水平垂直居中，子元素相對於父元素絕對定位， 
將子元素的top，right，bottom，left均設為0，然后設置子元素 margin: auto;

       #div4{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            position: relative;
        }
        #div4 p{
            width: 100px;
            height: 100px;
            background-color: green;

            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        <div id="div4">
            <p></p>
            <h3>其他內容</h3>
        </div>

 

3. 水平垂直居中，父元素設置 display: table-cell; vertical-align: middle; 
子元素設置 margin: auto; 
這種方式是讓所有的子元素作為一個整體垂直居中，並不能單獨指定某一個子元素居中

        #div5{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            display: table-cell;
            vertical-align: middle;
        }
        #div5 p{
            width: 100px;
            height: 100px;
            background-color: green;

            margin: auto;
        }

        <div id="div5">
            <p></p>
        </div>

 

4. 水平垂直居中，子元素相對定位，top，let設為50%，transform: translate(-50%, -50%); 
這種方式並不會釋放子元素在文檔中所占的位置。

        #div6{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        #div6 p {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;

            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        <div id="div6">
            <p></p>
            <h3>其他內容</h3>
        </div>

 

5. 水平垂直居中，子元素相對於父元素絕對定位， 
子元素top，let設為50%，transform: translate(-50%, -50%); 
這種方式會釋放子元素在文檔中所占的位置

        #div7{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            position: relative;
        }
        #div7 p {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        <div id="div7">
            <p></p>
            <h3>其他內容</h3>
        </div>

 

6. 水平垂直居中，父元素設置 display: flex; justify-content: center; align-items: center; 
justify-content: center; 是讓所有的子元素作為一個整體居中。

       #div8{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        #div8 p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;
        }

        <div id="div8">
            <p></p>
        </div>