Was sind die gängigen Implementierungsmethoden für die horizontale und vertikale Zentrierung in CSS? Drei gängige horizontale und vertikale Zentrierungsmethoden in CSS

In diesem Artikel werden die gängigen Implementierungsmethoden für die horizontale und vertikale Zentrierung in CSS vorgestellt. Drei gängige horizontale und vertikale Zentrierungsmethoden in CSS haben einen bestimmten Referenzwert. Ich hoffe, dass sie für Sie hilfreich sind.

Wenn die Breite und Höhe des untergeordneten Elements nicht bekannt sind, wie erreicht man die horizontale und vertikale Zentrierung des untergeordneten Elements? Hier sind mehrere Methoden:

1

HTML- und CSS-Code lauten wie folgt:

<div class="super-div">
        <div class="sub-div">利用定位和transform
            <br/>实现水平垂直居中</div>
</div>
 
 .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .sub-div {
            background-color: green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top left 分别相对于父元素的高度和宽度，translate相对于自身的宽度和高度 */
        }

Der Kern dieser Implementierung liegt im Anmerkungsteil. Bei der relativen Positionierung werden oben und links relativ zur Höhe und Breite des übergeordneten Elements berechnet Element, während die Transformation relativ ist. Berechnet mit seiner eigenen Breite und Höhe. Der Effekt ist wie folgt:

2. Verwenden Sie das Tabellenzellenlayout, um

zu implementieren HTML- und CSS-Code wie folgt:

     <div class="super-div table">
        <div class="table-cell">利用table-cell
            <br/>实现水平垂直居中</div>
    </div> 
 
 
   .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
   .table {
            display: table;
        }
 
   .table-cell {
            display: table-cell;
            /*垂直居中*/
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
            background-color: green;
        }

Das übergeordnete Element ist auf Tabellenlayout und das untergeordnete Element auf Tabellenzellenlayout festgelegt. Erkennen Sie dann die vertikale und horizontale Zentrierung der untergeordneten Elemente. Der Effekt ist wie folgt:

3. Verwenden Sie das Flex-Layout, um

HTML- und CSS-Code zu implementieren wie folgt:

<div class="super-div flex">
        <div class="flex-center">利用flex布局
            <br/>实现水平垂直居中</div>
</div> 
 
.super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .flex {
            display: flex;
            /*flex布局*/
            justify-content: center;
            /*使子项目水平居中*/
            align-items: center;
            /*使子项目垂直居中*/
        }
 
 .flex-center {
            background-color: green;
        }

Der Effekt ist wie folgt:

Empfohlene verwandte Artikel:

Zwei Möglichkeiten, Tabellen zu verwenden CSS (Beispiele)

Was ist das Konzept des mehrspaltigen Layouts? Anwendung des mehrspaltigen CSS-Layouts (Beispielcode)

Das obige ist der detaillierte Inhalt vonWas sind die gängigen Implementierungsmethoden für die horizontale und vertikale Zentrierung in CSS? Drei gängige horizontale und vertikale Zentrierungsmethoden in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!