5 meilleures solutions pour le centrage vertical et horizontal CSS

Cet article partage principalement avec vous les cinq meilleures solutions pour le centrage vertical et horizontal CSS et leurs avantages et inconvénients respectifs. L'introduction est très détaillée et a une valeur de référence. J'espère que cela pourra aider tout le monde. .

Alignement central CSS

• Le préfixe du navigateur est omis dans le code

• Les exemples suivants sont triés par mon normes personnelles

• Bien sûr il existe plus de méthodes de centrage mais je pense que seules ces 5 méthodes sont les solutions les plus complètes

centrage flexible

Avantages : les hauteurs inconnues peuvent être centrées

<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 class="wrap">
    <p class="other">
        <h2>这是第二层的内容 不会居中</h2>
    </p>
</p>

position + centrage de traduction

Avantages : les hauteurs inconnues peuvent être centrées, avec des niveaux d'imbrication minimaux

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

centrage des cellules du tableau

Inconvénients : 1. Le calque de centrage doit définir la largeur (.center). 2. Le calque externe est imbriqué sur un calque (.cell) 3. Le calque central doit définir la largeur (% autorisé)

<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 class="wrap">
    <p class="cell">
        <p class="center other">
            <h2>这一层的内容 不会居中</h2>
        </p>
    </p>
</p>

Centrage traditionnel (2 types)

Inconvénients : 1 . margin La valeur doit être auto. 2. La couche centrale doit définir une hauteur et une largeur (% autorisés) 3. Doit utiliser la 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 class="center other">
    <h2>这一层的内容 不会居中</h2>
</p>

Inconvénients : La couche centrale doit définir une hauteur et une largeur fixes, et la magie doit être calculée à partir du hauteur et largeur.

<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 class="wrap">
    <p class="center other">
        <h2>这一层的内容 不会居中</h2>
    </p>
</p>

Recommandations associées :

Comment centrer le contenu verticalement et horizontalement lors de l'écriture d'une boîte modale ?

À propos de l'utilisation de CSS pour réaliser un centrage vertical et horizontal du texte et des images

Introduction à 6 façons d'utiliser CSS pour obtenir parfaitement un centrage vertical et horizontal centrage

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!