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

c9ccee2e6ea535a969eb3f532ad9fe89
    .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%);
    }
531ac245ce3e4fe3d50054a55f265927
1496b9ead66877b9376ec97ce364601494b3e26ee717c64999d7867364b1b4a3

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!