A brief discussion on how to display an element in the center of its parent element in CSS

The question of how to vertically center an element in css is already a commonplace question. Whether it is a newbie or a veteran, this question is often asked during the interview process. I was watching a flex video tutorial two days ago, and it mentioned the centering of elements, so today I will take a look at some common methods. Please criticize and correct any shortcomings (all the codes are typed by myself and available)

1. Horizontal centering (margin: 0 auto;)

About this, everyone should be the best If you are not unfamiliar with it, whether you are in a training class or studying by yourself. This should be the first method taught by the teacher (horizontally), but it has a premise that the wrapped elements cannot have floating attributes. Otherwise, this property will be invalid. The specific code is as follows:

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
        }
        item{            margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>

    <p>
        </p><p></p>
     

<br>

　

2. Horizontal centering (text-align: center;)

If this attribute does not float, we can convert it to inline/inline-block, and then add the text-align:center; attribute to its parent element to center it

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;            text-align:center;
        }
        item{            display:inline/inline-block;
            width: 100px;
            height: 100x;
            background: green;
        }
</style>

    <p>
        </p><p></p>
     

　

3. Horizontal and vertical centering (1) The child element is absolutely positioned relative to the parent element, and the margin value is minus half of its own width and height

This method has certain limitations, because it must know the width and height of the child element itself

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height: 100x;
            background: green;
        }</style>
    <p>
        </p><p></p>
     

4, Horizontal and vertical centering (2) The child element is absolutely positioned relative to the parent element, and the margin value is auto

This method is not limited by the width and height of the element and is easier to use (recommended)

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
           position: relative;
        }
        item{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top:0;
            margin: auto;
            width: 100px;
            height: 100x;
            background: green;
        }</style>
    <p>
        </p><p></p>
     

5. Horizontal and vertical centering (3) diplay: table-cell

This method is to convert elements into table style. Then use the style of the table to center (recommended)

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
        }
        item{
            margin:0 auto;
            width: 100px;
            height: 100x;
            background: green;
        }</style>
    <p>
        </p><p></p>
     

6. Horizontal and vertical centering (4) Absolute positioning and transfrom

This method is the best way to show off your coolness. It uses css3 transformation. When the interviewer sees this in your code, your coolness will instantly rise. Of course, you know, cool stuff. There are compatibility issues

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
            position:relative;
        }
        item{
            width: 100px;
            height: 100x;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }</style>
    <p>
        </p><p></p>
     

7. Horizontal and vertical centering (5) flex attribute in css3

This attribute is easy to use, but it definitely has compatibility issues. Users should pay attention

<style>
        body{margin: 0;}
        .box{
            width: 400px;
            height: 400px;
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        item{
            width: 100px;
            height: 100x;
            background: green;
            
        }</style>
    <p>
        </p><p></p>
     

Did you suddenly feel that the method of centering is so simple? ! ! ! ! ! ! ! ! ! ! ! !

For more on how an element in CSS is displayed in the center of its parent element, please pay attention to the PHP Chinese website for related articles!