5 Best Solutions for CSS Vertical and Horizontal Centering

This article mainly shares with you the five best solutions for CSS vertical and horizontal centering and their respective advantages and disadvantages. The introduction is very detailed and has reference value. Friends in need can refer to it. I hope it can help everyone.

CSS center alignment

• The browser prefix is ​​omitted in the code

• The following examples are sorted according to my personal standards

• Of course there are more centering methods, but I think only these 5 methods are the most complete solutions

flex Centering

Advantages: Unknown heights can be centered

<style>
    .wrap{height: 100%;display: flex; justify-content: center; align-items: center;align-content:center;}
    
    .other{background-color: #ccc; width: 400px;height: 400px;} /* 额外的样式 可去除 */
</style>
<p>
    </p><p>
        </p><h2 id="这是第二层的内容-不会居中">这是第二层的内容 不会居中</h2>
    

position + translate centering

Advantages: Unknown heights can be centered, with minimum nesting levels

<style>
    /* position 可选 absolute|fixed*/
    .center{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);}
    
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p>
    </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>

table-cell Centering

Disadvantages: 1. The centering layer needs to set the width (.center). 2. The outer layer is nested one layer (.cell) 3. The width of the center layer must be set (% allowed)

<style>
    .wrap{display: table;width: 100%;height: 100%;}
    .cell{display: table-cell;vertical-align:middle;}
    .center{width: 400px;margin-left:auto;margin-right:auto;}
    .other{background-color: #ccc;  height: 400px;} /* 额外的样式 可去除 */
</style>
<p>
    </p><p>
        </p><p>
            </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>
        
    

Traditional centering (2 types)

Disadvantages: 1. The margin value must for auto. 2. The center layer must have a fixed height and width (% allowed) 3. Position

<style>
    /*
        1. left、top、right、bottom 可以任意,但必须相等
        2. position 可选 absolute|fixed
    */
    .center{position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;margin: auto;width: 400px;height: 400px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p>
    </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>

must be used Disadvantages: The center layer must have a fixed height and width, and magin needs to be calculated from the height and width.

<style>
    .wrap{position: relative;height: 100%;}
    .center{position: absolute;left: 50%;top: 50%; width: 400px;height: 300px; margin-left: -200px;margin-top: -150px;}
    .other{background-color: #ccc; } /* 额外的样式 可去除 */
</style>
<p>
    </p><p>
        </p><h2 id="这一层的内容-不会居中">这一层的内容 不会居中</h2>
    

Related recommendations:

How to center the content vertically and horizontally when writing a modal box?

About using CSS to achieve vertical and horizontal centering of text and images

Introduction to 6 methods of using CSS to achieve vertical and horizontal centering

The above is the detailed content of 5 Best Solutions for CSS Vertical and Horizontal Centering. For more information, please follow other related articles on the PHP Chinese website!