6 Möglichkeiten, eine vertikale Zentrierung in CSS zu erreichen (Codebeispiel)

In diesem Artikel werden Ihnen 6 Möglichkeiten vorgestellt, wie Sie eine vertikale Zentrierung in CSS erreichen können (Codebeispiele). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

HTML-Struktur

<p class="box box2">
    <span class="content content2">垂直居中</span></p>

Standard-CSS-Stilstruktur

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. Tabellenzelle

Diese Methode ist mit IE8+, Firefox, Google kompatibel und es spielt keine Rolle, ob der Inhalt Breite oder Höhe hat . Hinweis: IE8+ beinhaltet IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2. Anzeige: Flex ; , Es spielt keine Rolle, ob der Inhalt Breite oder Höhe hat. Kompatibel mit Firefox, Google

Referenz-Flex-Layout: https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. Absolute Positionierung und negative Margen

Diese Methode ist mit IE8+, Firefox und Google kompatibel
Der Inhalt muss Breite und Höhe haben

.

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. Absolute Positionierung und 0 

Diese Methode ist kompatibel mit IE8+, Firefox, Google, Inhalt muss Breite und Höhe haben.

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. Absolute Positionierung und Transformation

Die Die Methode ist nicht mit IE8 kompatibel, aber kompatibel mit IE9+, Firefox und Google

Es spielt keine Rolle, ob der Inhalt Breite oder Höhe hat.

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6. display:flex and margin:auto 

Inhalt hat Breite und Höhe: ist nicht kompatibel mit IE8, IE9,

Inhalt hat keine Breite und Höhe: ist nicht kompatibel mit IE. Sowohl Breite als auch Höhe sind kompatibel mit Firefox und Google.

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

Das obige ist der detaillierte Inhalt von6 Möglichkeiten, eine vertikale Zentrierung in CSS zu erreichen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!