Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2018-10-25 15:01:35
nach vorne
2093 Leute haben es durchsucht

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>
Nach dem Login kopieren

Standard-CSS-Stilstruktur

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

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;   //上下居中        
}
Nach dem Login kopieren

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;      //上下居中
}
Nach dem Login kopieren
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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
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%);
}
Nach dem Login kopieren

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;}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage