How do I center a block-level child element horizontally and vertically in the parent element? How many ways are there to do that? This is a very common CSS interview question, and this article will discuss several ways to implement it.

I’ll show you the nesting relationship first, and the rest of the implementation code will be based on it.

1. Elastic box model of parent element

Add an elastic box attribute to the parent element, context-content, and align-items

.father { border: solid 1px; width: 300px; height: 300px; display: flex; /* open elastic box */ justify-content: center; /* align = center */ align-items: center; }. Son {background: #e4393c; width: 100px; height: 100px; }Copy the code

Margin: Auto

Margin: Auto; margin:auto; margin:auto; margin:auto

.father { border: solid 1px; width: 300px; height: 300px; display: flex; }. Son {background: #e4393c; width: 100px; height: 100px; margin: auto; }Copy the code

3. Positioning, parent and child, with transform attribute

Relative positioning of the parent element and absolute positioning of the child element are implemented using transform translation

.father { border: solid 1px; width: 300px; height: 300px; position: relative; } .son { background: #e4393c; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* Move up and to the left by 50% */}Copy the code

Fourth, positioning, the parent phase and the child must, with margin attribute

The parent element is positioned relative to the child element, and the child element is positioned absolute at the same time 0, plus margin:auto

.father {
    border: solid 1px;
    width: 300px;
    height: 300px;
    position: relative;
}
.son {
    background: #e4393c;
    width: 100px;
    height: 100px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
Copy the code

Display: table-cell; display: inline-block;

Convert the parent element to a table cell and the child element to an inline block

.father { border: solid 1px; width: 300px; height: 300px; display: table-cell; /* This element will be displayed as a table cell (like < TD > and <th>) */ text-align: center; /* vertical-align: bottom; }. Son {background: #e4393c; width: 100px; height: 100px; display: inline-block; /* Convert it to an inline block */}Copy the code

Six, simple and crude pure positioning way to achieve

Margin-left and margin-top are used to move the width and height of the child element by half

.father {
    border: solid 1px;
    width: 300px;
    height: 300px;
    position: relative;
}
.son {
    background: #e4393c;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
Copy the code

To sum up, the most commonly used method is the first and second, if the PC side needs to consider compatibility, you can use the sixth, the other we can as an extension to understand.

Finally, if you think it’s ok, please give it a thumbs up. Thank you.