Why can auto achieve vertical centering in margin
This article shows you why the auto in margin can achieve vertical center, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.
Margin concept
The margin attribute sets the outer margin attribute for all four (top, bottom, left, right) directions for a given element. This is an abbreviation for the four outer margin property settings. The four outer margin property settings are: margin-top,margin-right,margin-bottom and margin-left. The specified outer margin is allowed to be negative.
The top and bottom attributes of margin are not valid for non-replacement inline elements, such as span and code.
Why can vertical centering be achieved?
Block horizontal elements, such as div elements (the same below), by default (non-floating, absolute positioning, etc.), the horizontal direction will automatically fill the external container; if there is a margin-left/margin-right,padding-left/padding-right, the actual content area will be narrowed accordingly.
Fluid characteristics occur when an absolute positioning element has a specific positioning value for its opposite orientation attribute. The filling rules of margin:auto with fluid properties absolute positioning elements are exactly the same as ordinary fluid elements, with the following properties:
If one side is fixed, the auto,auto on one side is the size of the remaining space.
If both sides are auto, then divide the remaining space equally.
Therefore, margin: auto can be centered vertically.
Implement vertically centered code
To achieve vertical centering, you can use absolute positioning:
Div {
Width: 20px
Height: 20px
Position: absolute
Top: 0
Left: 0
Right: 0
Bottom: 0
Margin: auto
} the above is why auto can be centered vertically in margin. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.
