Several methods CSS child element in the parent element vertically centered horizontally

1. Horizontal center (margin: auto;) parent child element fixed width margin subelements: auto; child element can not be set to float or center failure.

        # DIV1 { 
            width : 300px by ; 
            height : 300px by ; 
            border : 1px Solid Red ; 
        } 
        # DIV1 P { 
            width : 100px ; 
            height : 100px ; 
            background-Color : Green ; / * a float: left; * If floating, then! Auto center will fail. ! * * / 
            Margin : 0 Auto ; 
        } 
        <div ID = "DIV1"> 
            <P> </ P>

            
 
        </ div>

 

2. the middle level, the parent child element width is fixed, the parent element arranged text-align: center; 
child element set display: inline-block; sub-element can not be set to float or center failure. 
If the element is set to inline, it will set the width and height of the element failure, which requires the content to hold up the box

       #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; * If you set the float, the auto-centered will fail!. ! * * / 
            The display : inline-Block ;
             / * the display: inline; * / 
            / * the display: inline-Flex; * / 
        }     

        <div ID = "Div2"> 
            <H4> else </ H4> 
            <P> < / the p-> 
            <h3> other content </ h3> 
        </ div>    

 

1. The horizontal and vertical centering, with respect to child elements absolutely positioned parent element, 
child elements top, left set to 50%, the sub-element margin top, left by subtracting their high half width.

        # DIV3 { 
            width : 300px by ; 
            height : 300px by ; 
            border : 1px Solid Red ; 

            position : relative ; 
        } 
        # DIV3 P { 
            width : 100px ; 
            height : 100px ; 
            background-Color : Green ; / * margin-Top: 10%;! * percentage with respect to the parent element *! * / / * padding-Top: 10%; the percentage relative to the parent element * *!! * /

            
            
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }

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

 

2. The horizontal and vertical center, relative to the parent element of the sub-element absolute positioning, 
the top sub-element, right, bottom, left are set to 0, and then sub-elements disposed 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. The horizontal and vertical center, the parent element is set display: table-cell; vertical-  align: middle;
child element set margin: auto; 
this approach is that all of the child elements centered vertically as a whole, and not specify a separate sub centering elements

        #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. The horizontal and vertical center child elements located opposite, top, let set 50%, transform: translate (-50  %, -50%);
this way and a release position not occupied by child elements in the document.

        #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>

 

The horizontal and vertical centering, with respect to child elements absolutely positioned parent element, 
child elements top, let set 50%, transform: translate (-50  %, -50%);
this way releases occupied sub-elements in the document s position

        #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. The horizontal and vertical center, the parent element provided the display: Flex; The justify-Content: Center; align = left-items: Center; 
The justify-Content: Center; subelements are all centered as a whole.

       #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>