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
margin: auto
: Diese Eigenschaft zentriert die Box horizontal, sofern für die Box eine Breite festgelegt ist.
display: flex; justify-content: center;
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%);
vertical-align: middle
transform: translator(-50%, -50%);
position: absolute; top: 50%; left: 50%; transform: Translate(-50%, -50%);
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!