Welche zwei Möglichkeiten gibt es, die horizontale und vertikale Zentrierung eines Elements festzulegen?

Die kleine Anforderung, eine horizontal und vertikal zentrierte modale Popup-Box zu erstellen, sollte für Frontends wie uns üblich sein.

Bevor CSS3 herauskam, gab es (mir fiel nur eine Möglichkeit ein), Elemente sowohl horizontal als auch vertikal zu zentrieren, nämlich die Verwendung von js-Berechnungen, um sie in der Mitte des Bildschirms zu positionieren. Diese Methode ist umständlich und mühsam.

Mit den folgenden beiden Methoden können Elemente schnell in der Mitte des Bildschirms positioniert werden.

　Flex-Layout

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

Übersetzen verwenden

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

Das obige ist der detaillierte Inhalt vonWelche zwei Möglichkeiten gibt es, die horizontale und vertikale Zentrierung eines Elements festzulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!