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

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

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!