Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.