Detailed explanation of the vertical centering solution in HTML5

In CSS, you have to complain. You can use margin: 0 auto; to achieve horizontal centering, but margin: auto 0 cannot achieve vertical centering.

The main reason here is that the parent control, that is, the control itself, is not positioned correctly. Looking directly at the code, first you need to use relative layout for the parent control, and then you need to use absolute layout for the child controls, and use the top and bottom attributes, combined with margin: auto 0;, to achieve the effect.

 .container-vertical { position: relative; width: 100%; height: 200px; background: deepskyblue; margin-bottom: 20px;} .container-vertical-item { position: absolute; width: 130px; height: 80px; text- align: center; background: yellow; line-height: 80px; top: 0; bottom: 0; margin: auto 0;}

Centered vertically.png

With the experience of 5.2, we can try to set the left, right, top, and bottom properties of the child control to 0, and margin: auto; automatic margins in all four directions. This effect can be achieved. The sub-controls that need to be noted must have the display: block; attribute.

Look at the code

 .container-horization-vertical { position: relative; width: 100%; height: 200px; background: deepskyblue; margin-bottom: 20px;} .container-horization-vertical-item { position: absolute; width: 150px; height: 80px; background: yellow; line-height: 80px; text-align: center; top: 0; left: 0; bottom: 0; right: 0; margin: auto;}

Summary: This solution is still very good when solving some not-so-complex page layouts, and can be adapted to any interface and almost all browsers. But for very complex pages, other solutions may be needed, but you can also get inspiration from this idea.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.