Résumé de 10 façons d'obtenir un centrage horizontal et vertical avec CSS qui mérite d'être collecté

Cet article vous présente un résumé de 10 façons d'obtenir un centrage horizontal et vertical en CSS qui valent la peine d'être collectées. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Marquez les points clés. C'est une question d'entretien incontournable. De nombreux intervieweurs aiment poser cette question.

• absolu + marge négative

• absolu + marge automatique

• absolu + marge automatique

• L'élément centré a une largeur et une hauteur variables

• absolu + transformation

• hauteur de ligne

• mode d'écriture

• table

• css-table

• flex

<div>
    <div>123123</div>
</div>

Afin d'obtenir l'effet ci-dessus, faisons d'abord quelques travaux préparatoires, en supposant que HTML Le code est le suivant, il y a deux éléments au total, l'élément parent et l'élément enfant

wp est le nom de classe de l'élément parent, box est le nom de classe de l'élément enfant, car il existe une différence entre la largeur fixe et la largeur variable, la taille est utilisée Indique la largeur spécifiée. Voici le code commun utilisé par tous les effets, principalement le réglage. la couleur, la largeur et la hauteur

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

Afin de corriger ce problème, vous pouvez utiliser la valeur négative de la marge. Des marges négatives peuvent positionner l'élément dans le sens opposé en précisant la marge de l'élément enfant comme. moitié négative de la largeur de l'élément enfant, valeur, vous pouvez centrer les éléments enfants. Le code CSS est le suivant

<div>
    <div>123123</div>
</div>

Cette méthode nécessite également. que la largeur et la hauteur de l'élément centré doivent être fixes. Le code HTML est le suivant

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

De cette façon, en définissant la distance dans toutes les directions à 0, puis en définissant la marge sur auto, vous pouvez le centrer dans toutes les directions.

<div>
    <div>123123</div>
</div>

Cette méthode nécessite également que la largeur et la hauteur de l'élément centré soient fixes, on ajoute donc une classe de taille à la boîte. Le code HTML est le suivant. suit

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

Merci à CSS3 pour avoir apporté les attributs calculés Puisque le pourcentage du haut est basé sur le coin supérieur gauche de l'élément, soustrayez simplement la moitié de la largeur. Le code est le suivant

La compatibilité de cette méthode dépend de la compatibilité de calc. L'inconvénient est que vous devez connaître la largeur et la hauteur des éléments enfants

Cliquez pour voir la DÉMO complète

absolu + transformation

<div>
    <div>123123</div>
</div>

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div>
    <div>123123</div>
</div>

text-alignDéfinissez la boîte comme élément en ligne et utilisez vertical-align pour. centrez-le horizontalement, mais de nombreux étudiants ne savent peut-être pas que vous pouvez également utiliser

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

writing-modeBeaucoup d'élèves doivent être comme moi et ne connaissent pas l'attribut

<div>水平方向</div>
<div>垂直方向</div>

.div2 {
    writing-mode: vertical-lr;
}

水平方向
垂
直
方
向

text-alignCe qui est plus étonnant, c'est que tous les attributs CSS horizontaux deviendront des attributs verticaux, tels que writing-mode, via text-align et

<div>
    <div>
        <div>123123</div>
    </div>
</div>

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

.wp {
    text-align: center;
}
.box {
    display: inline-block;
}

点击查看完整DEMO

css-table

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

<div>
    <div>123123</div>
</div>

下面通过css属性，可以让p显示的和table一样

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错

点击查看完整DEMO

flex

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中

<div>
    <div>123123</div>
</div>

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况

点击查看完整DEMO

grid

感谢@一丝姐 反馈的这个方案，css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中

<div>
    <div>123123</div>
</div>

.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少，但兼容性不如flex，不推荐使用

点击查看完整DEMO

总结

下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin

• PC端有兼容要求，宽高不固定，推荐css-table

• PC端无兼容性要求，推荐flex

• 移动端推荐使用flex

小贴士：

最近发现很多同学都对css不够重视，这其实是不正确的，比如下面的这么简单的问题都有那么多同学不会，我也是很无语

<div>123</div>
<div>123</div>

.red {
    color: red
}

.blue {
    color: blue
}

相关推荐：

CSS实现div水平垂直居中的五种方法

css 实现DIV水平垂直居中于屏幕

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!