I. Introduction

In the daily development of website interface or App. In the process of applets, you will encounter the need to center the box horizontally and vertically. Different requirements require us to adopt different methods for horizontal and vertical centering of elements.

Two, the method of horizontal and vertical centering of CSS boxes

1. display: flex elastic layout implementation

Attributes	describe
display	Specifies the box type of an HTML element
flex-direction	Specifies the arrangement of child elements in the flexbox
justify-content	Set the arrangement of elements in the flexbox in the direction of the main axis
align-items	Sets the alignment of elements in the flexbox in the direction of the cross axis

Horizontal and vertical centering is achieved by setting an elastic layout for the parent box. The code example is as follows

            .father {
                width: 200px;
                height: 200px;
                background: red;
                display: flex;
                /* 实现水平方向上居中 */
                justify-content: center;
                /* 实现垂直方向居中 */
                align-items: center;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
            }
            
            <div class="father">
                <div class="son"></div>
            </div>

The effect is as follows:

2. display: grid grid layout implementation

The same idea as the implementation of elastic layout, just set the parent box as a grid layout directly

            .father {
                width: 200px;
                height: 200px;
                background: red;
                display: grid;
                /* 实现水平方向上居中 */
                justify-content: center;
                /* 实现垂直方向居中 */
                align-items: center;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
            }

            <div class="father">
                <div class="son"></div>
            </div>

3. Table table layout implementation

Set the child element to display:inline-block by setting the parent element to display:table-cell.

            .father {
                width: 200px;
                height: 200px;
                background: red;
                display: table-cell;
                /* 垂直方向居中 */
                vertical-align: middle;
                /* 水平方向居中 */
                text-align: center;
            }
            .son {
                display: inline-block;
                width: 100px;
                height: 100px;
                background: green;
            }
            <div class="father">
                <div class="son"></div>
            </div>

4. Positioning+margin: auto implementation

Through the child and father phase, and set the child elements (left, top, right, bottom) to 0, then if you do not set the width and height for the child element at this time, the width and height of the child element will be the width and height of the parent element,

You can think carefully about the following. When setting two of these four attributes, the position of the child element is determined when the positions on both sides are fixed, and when the values of the four attributes are set, the position of the element is determined. Width Height.

            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

            <div class="father">
                <div class="son"></div>
            </div>

5. Positioning + margin: Negative value

The position of the child element is determined by the child and father, and then the child element is moved by margin to achieve the effect of horizontal and vertical centering of the child element

The specific implementation ideas are as follows:

First set relative positioning for the parent element, and then set absolute positioning for the child element, top: 50%, left: 50%, the code is as follows

            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 50%;
                left: 50%;
            }

But at this time, it did not achieve the effect we wanted.

But if we use margin to adjust the position of the child element at this time, we can achieve the effect of centering the child element horizontally and vertically. The value of margin-left is half of the width and height of the child element itself.

            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }

So far, the child element has achieved the effect

6. Positioning + transform

The idea is the same as 5. Positioning + margin . The position is initially determined through absolute positioning, and then the position is adjusted according to the transform. The width and height of the transform (-50%, -50%) are both displaced by half of the width and height of the sub-element itself.

            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

3. Summary

When we don't know the width and height of the element, we can still achieve horizontal and vertical centering methods: flex layout, grid layout, positioning + auto, positioning + transform,

These are common ways to center elements horizontally and vertically. Welcome everyone to discuss in the comment area and learn together.

How to center CSS box horizontally and vertically