>  기사  >  웹 프론트엔드  >  HTML5에서 상자를 중앙에 맞추는 방법

HTML5에서 상자를 중앙에 맞추는 방법

下次还敢
下次还敢원래의
2024-04-05 12:27:18996검색

HTML5에서 상자를 중앙에 맞추려면 다음과 같은 방법이 있습니다. 50% );위치: 절대; 왼쪽: 50%; 변환: 번역(-50%, -50%);

HTML5에서 상자를 중앙에 맞추는 방법

HTML5에서 상자를 중앙에 배치하는 방법

, 상자를 수평 및 수직으로 중앙에 배치하는 방법에는 여러 가지가 있습니다.

center 수평으로

  • text-align: centertext-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;
    : 이 CSS 조합은 상자를 수평 플렉스 컨테이너에 배치하고 수평 중앙에 배치합니다.
  • Vertical center
vertical-align: middle🎜: 이 속성은 인라인 요소(예: 이미지) 또는 표 셀 내에서 콘텐츠를 세로로 가운데에 배치합니다. 🎜🎜🎜transform:transform(-50%, -50%);🎜: 이 속성은 상자를 자체 높이와 너비의 50%만큼 수직 및 수평으로 이동하여 중앙에 배치합니다. 절대적으로 또는 상대적으로 배치된 상자와 함께 작동합니다. 🎜🎜🎜위치: 절대; 상단: 50%; 왼쪽: 50%; 변환: 변환(-50%, -50%);🎜: 이 CSS 조합은 절대 위치 상자를 수직으로 가운데에 배치합니다. 수평으로. 🎜🎜🎜🎜추가 팁🎜🎜🎜🎜🎜Flexbox 및 그리드 레이아웃: 🎜이 현대 레이아웃 시스템은 보다 유연한 센터링 옵션을 제공합니다. 🎜🎜🎜백분율 너비: 🎜 상자 너비를 컨테이너 너비의 백분율로 설정하여 컨테이너와 동일한 너비로 수직 중앙에 배치합니다(컨테이너가 이미 수직 중앙에 있는 경우). 🎜🎜

위 내용은 HTML5에서 상자를 중앙에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.