Heim > Artikel > Web-Frontend > So erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind
So erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind
- 藏色散人Original
- 2020-12-17 10:09:012857Durchsuche
So erreichen Sie eine Zentrierung, wenn CSS-Breite und -Höhe nicht festgelegt sind: 1. Verwenden Sie Flex für das Layout, um eine Zentrierung zu erreichen. 2. Verwenden Sie „Transform“ in CSS3, um Elemente zu versetzen. 3. Verwenden Sie „Table-Cell“, um eine Zentrierung zu erreichen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.
Empfohlen: „CSS-Video-Tutorial“
Wie erreicht man eine Zentrierung, wenn die Breite und Höhe von CSS nicht festgelegt sind?
Methode 1: Flex für das Layout verwenden
Jeder erste Reaktion könnte Flex sein. Weil die Schreibmethode einfach und intuitiv genug ist und es kein Kompatibilitätsproblem gibt. Es ist die erste Wahl für den Fokus auf Mobiltelefone.
<div class="wrapper flex-center">
<p>horizontal and vertical</p>
</div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}Verwendet zwei Schlüsselattribute: justify-content und align-items. Beide sind auf „center“ eingestellt, um eine Zentrierung zu erreichen.
Es ist zu beachten, dass das Flex-Center hier am übergeordneten Element aufgehängt werden muss, um das einzige untergeordnete Element zu zentrieren.
Methode 2: Position + Transformation verwenden
Verwendet hauptsächlich Transformation in CSS3, um Elemente zu versetzen, und der Effekt ist sehr gut
Diese Methode ist sehr leistungsstark und flexibel und beschränkt sich nicht auf die Erzielung einer zentrierten Anzeige. Aus Kompatibilitätsgründen wird auch IE zum Vergleich verwendet. Die zweite Methode kann von IE8 und höher verwendet werden. In IE8 und niedriger treten Probleme auf.
<body>
<div id="box">
<div id="content">div被其中的内容撑起宽高</div>
</div>
</body>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%); }Methode 3: Tabellenzelle verwenden
Verwenden Sie den Zellenzentrierungseffekt der Tabelle zur Anzeige. Wie Flex muss es auf das übergeordnete Element geschrieben werden.
<div class="wrapper">
<p>horizontal and vertical</p>
</div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine Zentrierung in CSS, wenn Breite und Höhe nicht festgelegt sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!