Quelles sont les méthodes de centrage vertical et horizontal en CSS ?

Cette fois, je vais vous présenter plusieurs méthodes pour le centrage vertical et horizontal du CSS, et quelles sont les précautions pour le centrage vertical et horizontal du CSS. Ce qui suit est un cas pratique, jetons un coup d'œil.

Alignement central CSS

• Les préfixes du navigateur sont omis dans le code

• Les exemples suivants sont triés selon mes normes personnelles

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

Centrage flexible

Avantages : Peut centrer des hauteurs inconnues

<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 + traduire centrage

Avantages : Peut centrer des hauteurs inconnues, 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>

table-cell Centré

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 avoir une hauteur et une largeur fixes (% autorisés) 3. 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>

doit être utilisée Inconvénients : La couche centrale doit avoir une hauteur et une largeur fixes, et magin doit l'être. calculé à partir de la hauteur et de la 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>

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

Comment utiliser le redessin et la réorganisation

Canvas pour créer une animation de Tai Chi en rotation

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!