Heim > Artikel > Web-Frontend > So zentrieren Sie ein Div in CSS vertikal
So zentrieren Sie ein Div in CSS vertikal
- php中世界最好的语言Original
- 2017-11-27 09:54:421624Durchsuche
Wenn ein Div mit einer festen Höhe und Breite vertikal auf der Webseite zentriert ist, muss es meiner Meinung nach sehr einfach sein. Aber wenn es ein Div mit einer festen Höhe und Breite ist, wie geht das? zentrieren? Wie werden diese Divs also vertikal zentriert? In diesem Artikel fasse ich
Feste Höhe und Breite div vertikal zentriert
enter image description here
Wie oben gezeigt, ist die feste Höhe und Breite sehr einfach und wird wie folgt geschrieben:
position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-50px;
Methode zum vertikalen Zentrieren von Divs ohne feste Höhe und Breite
Methode 1:
Verwenden Sie ein „Ghost“-Pseudoelement (unsichtbares Pseudoelement) und einen Inline-Block / vertikal ausrichten Es kann in der Mitte platziert werden, was sehr clever ist. Diese Methode erfordert jedoch, dass das zu zentrierende Element ein Inline-Block ist, was keine wirklich universelle Lösung ist.
HTML lautet wie folgt:
<div style="height: 300px;">
<div>
<h1>haorooms案例题目</h1>
<p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
</div>
</div>CSS lautet wie folgt:
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 50%;
}Methode 2:
Sie können die Tabellenlayoutmethode verwenden , aber diese Methode hat auch Einschränkungen!
wird wie folgt geschrieben:
<table style="width: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
Unknown stuff to be centered.
</td>
</tr>
</table>Da das Schreiben von Tabellen zeitaufwändiger ist, können Sie statt Tabelle auch div verwenden, geschrieben wie folgt:
html:
<div>
<div>
Unknown stuff to be centered.
</div>
</div>
css:
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}Methode drei, die ultimative Lösung:
Die beiden oben genannten Methoden haben möglicherweise ihre Grenzen. Die dritte Methode, die ich eingeführt habe, ist eine ausgereiftere Methode der vertikalen Zentrierung, die keine feste Höhe hat und Breite div! Die Methode ist jedoch in CSS3 geschrieben. Für Kinder, die mit IE8 kompatibel sein möchten, wird die Verwendung der oben genannten Methode empfohlen!
Die Methode ähnelt unserer festen Höhe und Breite, aber ohne Rand verwenden wir Translate()
Die Demo lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>haorooms不固定高度div写法</title>
<style>
.center {
position: fixed;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>Mein CSS oben ist Nur für Webkit-Kernel-Browser, andere Kernel-Browser sind wie folgt geschrieben:
-webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
Bezüglich der Schreibweise jedes Browsers können Sie meinen vorherigen Artikel lesen: http://www.haorooms.com/post /css_common
Einige Popup-Ebenenstile können mit dieser Methode auch zentriert werden
position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
Variable CSS3-Breite, hohe Ebene, vertikale Zentrierung
Sie können eine variable Breite in nur wenigen Minuten erreichen drei Sätze Breite horizontal zentriert vertikal.
justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 display:-webkit-flex;
Fügen Sie die obigen drei Sätze zum übergeordneten Element hinzu, um eine horizontale und vertikale Zentrierung der untergeordneten Elemente zu erreichen.
Verwenden Sie „margin:auto“ für die vertikale Zentrierung
Wenn Sie den Randwert auf „Auto“ setzen, können wir den verbleibenden Platz zuweisen! Wir wissen, dass Elemente auf Blockebene auf margin:0 auto gesetzt sind; sie können links, rechts und zentriert angezeigt werden! Gibt es eine Möglichkeit, den Rand oben, unten, links und rechts zu zentrieren, nachdem er auf margin:auto gesetzt wurde? Durch die Zentrierung oben, unten, links und rechts können wir unsere vertikale Zentrierung erreichen!
Die Antwort lautet: Ja, solange wir oben und unten genügend Platz lassen, können wir den Rand oben und unten automatisch zuweisen lassen.
Wir können die Positionierung nutzen, um dem Rand nach oben, unten, links und rechts genügend Platz zu geben! Dann können Sie margin:auto verwenden, um eine vertikale Zentrierung zu erreichen!
Die Implementierung von HTML ist wie folgt: (Erstellen Sie ein einfaches vertikales Popup-Feld)
<div>
<div></div>
</div>Der CSS-Code ist wie folgt, er ist sehr einfach und weist eine gute Kompatibilität auf unterstützt IE8+
.father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
.son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}Auf diese Weise können Sie eine vertikale Zentrierung erreichen, ist das nicht sehr einfach? Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So realisieren Sie den Popup-Effekt von Eingabeaufforderungstext in CSS3
CSS3 So implementieren Sie eine Tippanimation in
So implementieren Sie einen Ladeanimationseffekt in CSS3
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Div in CSS vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!