So zentrieren Sie die Box in HTML5

Um die Box in HTML5 zu zentrieren, gibt es die folgenden Methoden: horizontale Zentrierung: text-align: centermargin: autodisplay: flex; vertikale Zentrierung: Vertical-align: middletransform: Translate(-50%, - 50 %);Position: absolut; oben: 50 %; transformieren: übersetzen(-50 %, -50 %); , Es gibt mehrere Möglichkeiten, eine Box horizontal und vertikal zu zentrieren:

horizontal zentrieren

text-align: center

: Diese Eigenschaft zentriert den Text innerhalb der Box horizontal. Es wird jedoch nicht die gesamte Box horizontal zentriert.

margin: auto: Diese Eigenschaft zentriert die Box horizontal, sofern für die Box eine Breite festgelegt ist.

display: flex; justify-content: center;
• : Diese CSS-Kombination platziert die Box in einem horizontalen Flex-Container und zentriert sie horizontal. text-align: center：此属性将盒子内的文本水平居中。不过，它不会水平居中整个盒子。
• margin: auto：此属性将盒子在水平方向居中，前提是盒子已设置了宽度。
• display: flex; justify-content: center;：此 CSS 组合将盒子放在一个水平的 flex 容器中，并将其水平居中。

垂直居中

• vertical-align: middle：此属性在行内元素（如图像）或表格单元格中垂直居中内容。
• transform: translate(-50%, -50%);：此属性将盒子垂直和水平移动其自身高度和宽度的 50%，从而使其居中。它适用于绝对或相对定位的盒子。
• position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
Vertikale Mitte

vertical-align: middle

: Diese Eigenschaft zentriert Inhalte innerhalb von Inline-Elementen (z. B. Bildern) oder Tabellenzellen vertikal.
• transform: translator(-50%, -50%);
: Diese Eigenschaft verschiebt die Box vertikal und horizontal um 50 % ihrer eigenen Höhe und Breite und zentriert sie so. Es funktioniert mit absolut oder relativ positionierten Boxen.
• position: absolute; top: 50%; left: 50%; transform: Translate(-50%, -50%);
: Diese CSS-Kombination zentriert das absolut positionierte Feld vertikal horizontal.

🎜🎜🎜Zusätzliche Tipps🎜🎜🎜🎜🎜Flexbox- und Rasterlayout: 🎜Diese modernen Layoutsysteme bieten flexiblere Zentrierungsoptionen. 🎜🎜🎜Prozentbreite: 🎜 Legt die Boxbreite auf einen Prozentsatz der Containerbreite fest, sodass sie die gleiche Breite wie der Container hat und vertikal zentriert ist (wenn der Container bereits vertikal zentriert ist). 🎜🎜

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Box in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!