How to center a DIV with CSS

Reprinted from an unknown site that likes JS

For example a parent div (w:100%;h:400px) has a child div (w:100px;100px;). Center it up, down, left and right.

Method 1 ( varticle-align )

idea

Take advantage of the centering property of table cells.

step

Configure a div outside the parent div and set it as a table element ( display: table ) with a width of 100%
The parent div is configured as a table cell element ( display: table-cell )
The parent div configures the centering property ( vertical-align: middle ) to center the child div up and down
The child div is centered left and right through the margin configuration ( margin-left:auto; margin-right:auto )

example

<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .table {display: table; width: 100%;}
    .father {display: table-cell; vertical-align: middle;}
    .son {margin: auto;}
</style>
<body>
    <div class="table" >
        <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
            <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
        </div>
    </div>
</body>

Note:

Table cells are special. If there is only one cell, its width will account for 100% of the width of the parent (table|tr) by default;
The default width of the table will not be stretched and needs to be manually configuredwidth:100%；

Method 2 ( line-height )

idea

When the line height of the parent div is equal to its own height, the inner inline elements will be centered up and down. When inline blocks do not have a fixed height, they will also be centered up and down. With the text centering property text-align:center, inner inline elements or inline block elements can be centered left and right.

step

The child div is set as an inline block element ( display:inline-block );
The parent div sets the line height ( line-height ) to center the child div up and down
The parent div sets the text center ( text-align: center ) to center the child div left and right.

<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .father {line-height: 500px; text-align: center; font-size: 0;}
    .son { display: inline-block;
        /* display: inline-flex;
        display: inline-grid;
        display: inline-table; */
    }
</style>
<body>
    <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
    </div>
</body>

Note: If the line height is set to the height of the current parent div (400px), the child div with a fixed height will not be displayed in the center. The problem is that the browser treats it as a text center by default, that is, treats it as a piece of text (chrome default font-size: 16px; hight: 21px) for centering, not centering it as a height of 100px. So you need to adjust the parent div line-height. Taking font-size:0(the corresponding font height is 0) as an example, you need to increase the height of a child div by line-height (400px + 100px;).

Method three ( positioning )

idea

A pattern that utilizes a percentage of the positioning properties (top, left, right, bottom). If it is 100%, it means that the length of the offset is 100% of the height (width) of the parent div.

step

Positioning under the parent div tag ( position:relative|absolute|fixed ); child div absolute positioning ( position:absolute )
Center the child div up and down: top:50%;margin-top:-h/2;or bottom:50%;margin-bottom:-h/2;;
Center the child div left and right: left:50%;margin-left:-w/2or right:50%;margin-right:-w/2;

example

<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .father {position: relative;}
    .son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px;
    }
</style>
<body>
    <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
    </div>
</body>

Method 4 (positioning)

idea:

The values of the positioning attributes top and bottom (or left and right) are set to 0 respectively, but the child div has a fixed height (width) and cannot reach the upper and lower (left and right) spacing of 0. At this time, setting margin:auto to the child div will make It's centered.

step:

Positioning under the parent div tag ( position:relative|absolute|fixed|sticky ); child div absolute positioning ( position:absolute )
The child div is centered up and down:top:0;bottom:0;margin-top:auto;margin-bottom:auto
The child div is centered left and right:left:0;right:0;margin-left:auto;margin-right:auto

example

<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .father {position: relative;}
    .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}
</style>
<body>
    <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
    </div>
</body>

Method five (flex)

idea

Elastic box, with a centering function

example

<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .father {display: flex; align-items: center}
    .son {margin: auto}
</style>
<body>
    <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
    </div>
</body>

flex compatibility, and known issues

end

Method 2 and method 3 are more compatible than others

References

Can I use
css-vertical-center-solution
5 ways to achieve vertical centering with CSS -- front-end observation