Dieser Artikel fasst einige Methoden zur Verwendung von CSS zur Erzielung einer horizontalen/vertikalen Zentrierung zusammen. Ich hoffe, dass er für alle hilfreich ist.
1. Horizontale Zentrierung
1 (Inline-Element)
Setzen Sie das Attribut text-align:center;
2. Marge: 0 automatisch(Blockebenenelement)
Rand auf das Element selbst festlegen: 0 automatisch;
3. Die Breite des Elements ist festgelegt
1⃣️ Position+Rand-links
.ele{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;
}2⃣️ Position+links:0;rechts:0;Rand:0 automatisch
.ele{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;
}Die Breite des Elements ist nicht festgelegt
1⃣️css3-transform
.ele{
position:absolute;
left:50%;
transform:translate(-50%,0);
}2⃣️css3-width:fit-content (wenn die Element, das zentriert werden muss, ist festgelegt. Wenn float:left, können Sie die folgenden Attribute für das übergeordnete Element des Elements festlegen) 🎜>3⃣️flex
<span style="color: #000000">.ele-parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;
}<br>该属性目前只支持Chrome 和 Firefox浏览器.</span>2. Vertikale Zentrierung
.ele-parent{
display: flex;
justify-content: center;
}Sie können das Attribut für die vertikale Zentrierung einer einzelnen Textzeile festlegen line-height: Höhe des übergeordneten Elements
2. Die Höhe des Elements ist fest
1⃣️Position＋Rand oben
2⃣️
position+top:0;bottom:0;margin:auto 0
.ele-parent{
position:relative;
}
.ele{
position:absolute;
top:50%;
height:固定;
margin-top:-0.5高度;
}3. Die Höhe des Elements ist nicht festgelegt
1⃣️vertikal-align
.ele{
position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;
}
2⃣️css3-transform
<span style="color: #000000">.ele-parent{
display:table;
}
.ele{
display:table-cell;<br> vertical-align:middle;
}</span><strong><span style="font-size: 16px"> </span></strong>3⃣️
flex
.ele{
position:absolute;
top:50%;
transform: translate(0,-50%);
}
Das ist vorerst alles, bitte kritisieren und korrigieren Sie etwaige Mängel! ! !
.ele-parent{
display: flex;
align-items:center;
}Das obige ist der detaillierte Inhalt vonEinige Methoden zum Erreichen einer horizontalen/vertikalen Zentrierung mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
