Quelles sont les deux manières de définir le centrage horizontal et vertical d'un élément ?

La petite exigence de créer une boîte contextuelle modale centrée horizontalement et verticalement devrait être courante pour les frontaux comme nous.

Avant la sortie de CSS3, il n'y avait qu'une seule façon (à laquelle je pouvais penser) de centrer les éléments à la fois horizontalement et verticalement, qui consistait à utiliser les calculs js pour les positionner au milieu de l'écran. Cette méthode est maladroite et gênante.

Les deux méthodes suivantes permettent de positionner rapidement des éléments au milieu de l'écran.

　mise en page flexible

<style>
    .flex-mask {
        display: flex;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        align-items: center;　　// 垂直居中
        justify-content: center;　　// 水平居中
        background: rgba(0,0,0,.5);
    }
    .flex-box {
        width: 500px;
        height: 300px;
        background-color: #fff;
        border-radius: 10px;
    }
</style>

<!-- 元素 -->
<p class="flex-mask">
    <p class="flex-box"></p>
</p>

Utiliser la traduction

<style>
    .transform-box {
        position: fixed;
        z-index: 2;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 150px;
        background-color: red;
        border-radius: 10px;
        transform: translate(-50%, -50%);
    }
</style>
<p class="transform-box"></p>

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!