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.

Il semble très simple d'obtenir l'effet de l'image ci-dessus, mais en fait il y a des secrets cachés. Cet article résume les manières suivantes pour obtenir un centrage horizontal et vertical en CSS. Cet article les présentera une par une. un.

Seuls les éléments centrés sont définis. La largeur et la hauteur s'appliquent

• absolu + marge négative

• absolu + marge automatique

• absolu + marge automatique

absolu + calc

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

• absolu + transformation

• hauteur de ligne

• mode d'écriture

• table

• css-table

• flex

grille

absolue + marge négative

<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;
}
/* 公共代码 */

Remarque : ce code commun ne sera pas répété plus tard, seule l'invite correspondante sera donnée

Le pourcentage de positionnement absolu est relatif à la largeur et à la hauteur de l'élément parent.Grâce à cette fonctionnalité, l'élément enfant peut être affiché au centre, mais le positionnement absolu est basé sur le coin supérieur gauche de l'élément enfant.L'effet souhaité est que l'élément enfant. Le centre de l'élément est affiché

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

/* 定位代码 */
.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

C'est ma méthode la plus couramment utilisée. Cette méthode est plus facile à comprendre et a. bonne compatibilité. L'inconvénient est que vous devez connaître les éléments enfants

Cliquez pour voir la DÉMO complète

absolu + margin auto

<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.

Cette méthode est également très compatible, l'inconvénient est que vous devez connaître la largeur et la hauteur des éléments enfants

Cliquez pour voir. la DEMO complète

absolue + calc

<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>

Positionnement toujours absolu, mais cette méthode ne nécessite pas de largeur et de hauteur fixes des éléments enfants, donc la classe de taille n'est plus nécessaire. Le code HTML est le suivant

<.>Pour résoudre le problème de positionnement absolu, vous pouvez également utiliser la nouvelle transformation ajoutée CSS3, l'attribut de traduction de la transformation peut également être défini en pourcentage, qui est relatif à sa propre largeur et hauteur, vous pouvez donc définir la traduction sur -50 % pour réaliser le centrage. Le code est le suivant

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

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

La compatibilité de cette méthode dépend de la compatibilité de translate2d

Cliquez pour voir la DÉMO complète

lineheight

En utilisant l'attribut de centrage des éléments en ligne, vous pouvez également réaliser un centrage horizontal et vertical. Le code HTML est le suivant

<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

pour le centrer verticalement. Le code est le suivant

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

/* 定位代码 */
.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; /* 修正文字 */
}

Cette méthode nécessite de réinitialiser l'affichage du texte à l'effet souhaité dans le. élément enfant

Cliquez pour voir la DÉMO complète

mode d'écriture

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

Merci au professeur @.张髫兴 pour les commentaires. En termes simples, le mode d'écriture peut changer la direction d'affichage du texte. Par exemple, vous pouvez utiliser le mode d'écriture pour changer la direction d'affichage du texte en direction verticale

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

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

. L'effet d'affichage est le suivant :

水平方向
垂
直
方
向

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

peuvent obtenir un centrage horizontal et vertical , mais c'est un peu plus gênant

<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;
}

Cette méthode est un peu compliquée à mettre en œuvre et à comprendre

Cliquez pour voir le DEMO complet

tableau

Le tableau était utilisé pour la mise en page, mais personne ne le fait maintenant, mais le tableau peut également réaliser un centrage horizontal et vertical, mais cela augmentera beaucoup de code redondant

                                        

                

123123

            

Le le contenu de la cellule du tableau est naturellement centré verticalement. Ajoutez simplement un attribut de centrage horizontal

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

Cette méthode est trop redondante, et ce n'est pas l'utilisation correcte du tableau.

点击查看完整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

小贴士：

方法	居中元素定宽高固定	PC兼容性	移动端兼容性
absolute + 负margin	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + margin auto	是	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
absolute + calc	是	ie9+, chrome19+, firefox4+	安卓4.4+, iOS6+
absolute + transform	否	ie9+, chrome4+, firefox3.5+	安卓3+, iOS6+
writing-mode	否	ie6+, chrome4+, firefox3.5+	安卓2.3+, iOS5.1+
lineheight	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
table	否	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
css-table	否	ie8+, chrome4+, firefox2+	安卓2.3+, iOS6+
flex	否	ie10+, chrome4+, firefox2+	安卓2.3+, iOS6+
grid	否	ie10+, chrome57+, firefox52+	安卓6+, iOS10.3+

最近发现很多同学都对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!