1.text-align:center;
위 방법을 사용하여 중앙에 배치하는 것은 상위 컨테이너의 인라인 요소 또는 display:inline의 텍스트를 수평으로 중앙에 배치하는 것입니다.
2.inline-height: (높이) 값
인라인 높이를 사용할 때는 내용을 세로로 가운데에 배치하기 위해 높이와 함께 사용하는 경우가 많습니다.
3.margin :auto;
중앙에 여백을 사용하는 경우 일반적으로 요소가 정확한 너비 값을 제공하는 경우 margin:auto; 또는 margin: 0 auto를 설정하면 현재 요소가 가로로 중앙에 배치됩니다.
사용 여백을 사용하는 경우 margin-left와 margin-right의 값을 동일하게 설정할 수도 있으며 수평 센터링도 가능합니다.
4. 위치 위치 지정 및 센터링
에 따라 설정; 위쪽과 왼쪽 또는 아래쪽과 오른쪽은 요소를 수평으로, 수직으로 중앙에 배치할 수 있지만 상위 요소는 높이를 설정해야 합니다.
Flex 컨테이너의 flex-align:center;
-items: center; justify-cotent:center; 항목 속성 align-self:center;6. 음수 여백:
1 .box { 2 width: 600px; 3 height: 400px; 4 position: relative; 5 }
6 7 .box1 { 8 width: 300px; 9 height: 200px;10 padding: 20px;11 position: absolute;12 top: 50%;13 left: 50%;14 margin-left: -170px;/*(width+padding)/2 */15 margin-top: -120px;/*(height+padding)/2 */16 }
위 내용은 CSS 센터링 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!