CSS에서는 수평 센터링을 달성하기 위해 margin: 0 auto; 를 사용할 수 있지만 margin: auto 0 은 수직 센터링을 달성할 수 없습니다.
여기서 가장 큰 이유는 부모 컨트롤, 즉 컨트롤 자체의 위치가 올바르지 않기 때문입니다. 코드를 직접 보면 먼저 상위 컨트롤에 상대 레이아웃을 사용해야 하고 그런 다음 하위 컨트롤에 절대 레이아웃을 사용해야 하며 margin: auto 0;과 결합된 상단 및 하단 속성을 사용하여 다음을 달성해야 합니다. 효과.
.container-vertical { 위치: 상대; 너비: 200px; 배경: deepskyblue; margin-bottom: 20px;} .container-vertical-item { 위치: 절대값; 정렬: 중앙; 배경: 줄 높이: 80px; 하단: 0; 0;}세로로 가운데 정렬.png
가로 및 세로 중심5.2의 경험을 통해 하위 컨트롤의 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 0으로 설정하고 margin: auto를 네 방향 모두에서 자동으로 설정할 수 있습니다. 이 효과를 얻을 수 있습니다. 주목해야 할 하위 컨트롤에는 display: block 속성이 있어야 합니다.
코드를 보세요
.container-horization-vertical { 위치: 상대; 너비: 200px; 배경: deepskyblue; margin-bottom: 20px;} .container-horization-vertical-item { 위치: 너비: 150px; 80px; 배경: 노란색; 텍스트 정렬: 상단: 0; 0; 하단: 0; 오른쪽: 0;요약: 이 솔루션은 그다지 복잡하지 않은 일부 페이지 레이아웃을 해결할 때 여전히 매우 유용하며 모든 인터페이스와 거의 모든 브라우저에 적용할 수 있습니다. 하지만 매우 복잡한 페이지의 경우 다른 솔루션이 필요할 수도 있지만 이 아이디어에서 영감을 얻을 수도 있습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.