우리가 말을 쓸 당시에는 수평, 수직 센터링 방법에 대해 잘 몰랐을 것입니다. 그래서 일반적으로 사용되는 몇 가지 수평 및 수직 센터링 방법을 요약해 보겠습니다.
첫 번째 방법 <!--html 박스 코드--><!--가로 및 세로 가운데 정렬--><div class=Centered1> <p>첫 번째 유형</p></div><!-css 스타일 부분--> .Centered1{ 배경색: #800070; 너비: 100%; 높이: 500px; 상대 } .Centered1 p{ 너비: 200px; 200px; 깊이: 200px; 위치: 절대: 0; 오른쪽: 0; 두 번째 방법 <!--html 박스 코드--><!--가로 및 세로 가운데 정렬--><div class=Centered2> <p>d두 번째 유형</p></div><!-css 스타일 부분--> / *두 번째 방법은 가로 및 세로 중심입니다*/ .Centered2{ background-color: #ef8518; width: 100%; height: 500px; position:relative; 200px; 배경색:빨간색; 텍스트 정렬: 왼쪽: 50%; 여백-왼쪽: -100px 세 번째 방법 <!--html 상자 코드--><!--가로 및 세로 가운데 정렬--><div class=Centered3> <p>세 번째 유형</p></div><!-css 스타일 부분--> /*세 번째 방법은 가로 및 세로 중심입니다.*/ .Centered3{ background-color:dimgrey; width: 100%; height: 500px; position:relative; 200px; 높이: 200px; 줄 높이: 200px; 왼쪽: 50%; 변환(-50%,-50%) 네 번째 방법 <!--html 상자 코드--><!--가로 및 세로 가운데 정렬--><div class=Centered4> <p>네 번째 유형</p></div><!-css 스타일 부분--> /*네 번째 방법은 수평 및 수직 중앙 정렬이며, 이전 버전의 플렉스 레이아웃입니다*/ .Centered4{ background-color: #FF4444; width: 100% height: 500px; -webkit-box-pack:center; .Centered4 p { width: 200px; background-color:cadetblue; 텍스트 정렬: center; 다섯 번째 방법 <!--html 박스 코드--><!--가로 및 세로 가운데 정렬--><div class=Centered5> <p>5번째 유형</p></div><!-css 스타일 부분--> /*다섯 번째 방법은 수평 및 수직 중심입니다. */ .Centered5{ background-color: darkslateblue; height: 500px; ; align-items: center; } .Centered5 p { 너비: 200px; 배경색: 자홍색; 텍스트 정렬: 센터;위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.