HTML5에서 상자를 중앙에 맞추려면 다음과 같은 방법이 있습니다. 50% );위치: 절대; 왼쪽: 50%; 변환: 번역(-50%, -50%);
HTML5에서 상자를 중앙에 배치하는 방법
, 상자를 수평 및 수직으로 중앙에 배치하는 방법에는 여러 가지가 있습니다.
center 수평으로
text-align: 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%);
: 이 속성은 상자 내부의 텍스트를 수평으로 중앙에 배치합니다. 그러나 전체 상자를 수평으로 중앙에 배치하지는 않습니다. margin: auto
: 이 속성은 상자에 너비가 설정되어 있는 경우 상자를 가로 중앙에 배치합니다.
display: flex; justify-content: center;
vertical-align: middle
🎜: 이 속성은 인라인 요소(예: 이미지) 또는 표 셀 내에서 콘텐츠를 세로로 가운데에 배치합니다. 🎜🎜🎜transform:transform(-50%, -50%);
🎜: 이 속성은 상자를 자체 높이와 너비의 50%만큼 수직 및 수평으로 이동하여 중앙에 배치합니다. 절대적으로 또는 상대적으로 배치된 상자와 함께 작동합니다. 🎜🎜🎜위치: 절대; 상단: 50%; 왼쪽: 50%; 변환: 변환(-50%, -50%);
🎜: 이 CSS 조합은 절대 위치 상자를 수직으로 가운데에 배치합니다. 수평으로. 🎜🎜🎜🎜추가 팁🎜🎜🎜🎜🎜Flexbox 및 그리드 레이아웃: 🎜이 현대 레이아웃 시스템은 보다 유연한 센터링 옵션을 제공합니다. 🎜🎜🎜백분율 너비: 🎜 상자 너비를 컨테이너 너비의 백분율로 설정하여 컨테이너와 동일한 너비로 수직 중앙에 배치합니다(컨테이너가 이미 수직 중앙에 있는 경우). 🎜🎜위 내용은 HTML5에서 상자를 중앙에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!