Solution to vertical centering in HTML5

In CSS, you have to complain. Using margin: 0 auto; can achieve horizontal centering, but margin: auto 0 cannot achieve vertical centering. This article mainly introduces the detailed solution of vertical centering in HTML5. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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

Centered horizontally and vertically

With the experience of 5.2, we can try to set the left, right, top, and bottom properties of the sub-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 useful when solving some less complex page layouts. It’s great 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.

Related recommendations:

How to determine horizontal and vertical screens in mobile HTML5

In-depth understanding of position in html5

Ten things you must know in html5

The above is the detailed content of Solution to vertical centering in HTML5. For more information, please follow other related articles on the PHP Chinese website!