CSS vertically centered horizontally

1, the Absolute Positioning Center (sub-elements need to set wide height)

• > Principle: Elements in the case of over-constrained, the margin is set to auto, the browser will re-calculate the value of the margin, over-limited refers to the simultaneous setting of Top/bottom and height or left/right and width.

Parent container for content blocks:

position:relative;

Child elements: (height must be set)

Position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;

2, absolute positioning with margin (sub-elements need to set wide height)

• > Principle: top:50% elements on the upper boundary of the inclusion box midpoint, set negative outer boundary so that the vertical center of the element and the center of the containing box coincide;

First Kind

<style>50%;top:50%-50px 0 0-50px;   (margin setting percentage is equivalent to its own height and width)
}

<div class= "One" >

</div>

The second Kind

<style>    . one{    border:1px solid red;    width:300px;height:300px;    position:relative;    }    . two{        Position:absolute;        Top:50%;        Left:0;        Right:0;        Margin:auto;        Margin//(margin set percentage is equivalent to its own height and width)        width:200px;        height:200px;        background:red;    } </style><div class= "One" >    <div class= "one" ></div></div>                    

3, Table-cell mode (sub-element does not need to set wide height)

• > Principle: Using the characteristics of table layout, Vertical-align is set to middle; the contents of the cell are aligned with the middle of the row

Parent container: (Set width height)

Display:table-cell;text-align:center;vertical-align:middle;

Child elements:

Display:inline-block;vertical-align:middle;

<style>    . one{        border:1px solid red;        width:200px;height:200px;        Display:table-cell;vertical-align:middle;text-align:center;    }    . two{        background:red;        (1) display:inline-block; (with this method upward deviation 2px)        (2) margin:auto (Vertical horizontal center)    }</style ><div class= "One" >    <div class= "one" >11111111111</div></div>

4. Center the picture by adding an empty span label (the child elements need to be set to a wide height)
Parent container:

Text-align:center;

<span>:

Display:inline-block;  // change inline element to inline block element display // 1px, realize the readable effect under IE // Use the height of the element as the height of the picture container // Vertical Alignment

Image:

Vertical-align:middle;

<style>    . one{        border:1px solid red;        width:200px;height:200px;        Text-align:center;    }    span{        Display:inline-block;        width:1px;         100%;    Vertical-align:middle;    } </style><div class= "One" >    <span></span>    </div>

5, margin margin to take negative numbers, the size of width/height (not using box-sizing:border-box including padding,), plus top:50%; left:50%;.
(The child element needs to be set to a wide height)

<style>    . one{        border:1px solid red;        width:200px;height:200px;        position:relative;    }    . two{        background:red;        width:30px;        height:20px;        padding:20px;        Position:absolute;         50%; left:50%;        Margin/**/        margin/** *      }</style><div class= "One" >    <div class= "one" ></div></div>    

6, Content definition transform:translate ( -50%,-50%), and add top:50%;left:50%. (The child element needs to be set to a wide height)

<style>    . one{        border:1px solid red;        width:200px;height:200px;        position:relative;    }    . two{        background:red;         50%;         30%;        Margin:auto;        Position:absolute;         50%; left:50%;         -webkit-transform:translate ( -50%,-50%);         -ms-transform:translate ( -50%,-50%);        Transform:translate (-50%,-50%);    } </style><div class= "One" >    <div class= "one" ></div></div>

7. Add extra child elements set Margin-bottom to half the height of the content element +padding. (cannot be horizontal vertically centered, only vertically centered)

• > Similar to the 2 method, the bottom boundary of the floater is the center line of the containing box, and the negative outer boundary guarantees that center line is coincident with the center line of the containing frame.

<style>    . one{        border:1px solid red;        width:200px;height:200px;    }    . floater{        float: left;         50%;         100%;        Margin-bottom: -10%;    }    . two{        Clear:both;         20%;        background:red;    } </style><div class= "One" >    <div class= "Floater" ></div>    <div class= "one" > </div></div>

8, Inline-block mode (sub-element does not need to set wide height)

• > Principle: Set vertical-align:middle for the inline-block element of the same row, and the Inline-block element in that row is aligned to the vertical centerline of the element.

<style>    . one{        border:1px solid red;        width:300px;height:300px;        Text-align:center;    }    . one:after{        ";        Display:inline-block;        Vertical-align:middle;         100%;    }    . two{        background:red;        Display:inline-block;        Vertical-align:middle;    } </style><div class= "One" >    <div class= "one" >11111111111111111111</div></div>

9, Flexible box layout (sub-elements need not set wide height)
[CSS Elastic box] [1]
First Kind

<style>    . one{        border:1px solid red;        width:300px;height:300px;        Display:flex;        Align-items:center;        Justify-content:center;    }    . two{        background:red;    } </style><div class= "One" >    <div class= "one" >111111111111</div></div>    

The second Kind

<style>    . one{        border:1px solid red;        width:300px;height:300px;        Display:flex;    }    . two{        background:red;        Margin:auto;    } </style><div class= "One" >    <div class= "one" >111111111111</div></div>

CSS vertically centered horizontally