Einige Methoden zum Erreichen einer horizontalen/vertikalen Zentrierung mit CSS

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⃣️

.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!