이 글에서는 주로 CSS 가로 및 세로 센터링을 구현하는 4가지 방법을 공유합니다. 계획에서는 너비와 높이도 지정했지만 너비와 높이가 고정되어 있다는 의미는 아닙니다. 하지만 너비와 높이를 주지 않으면 효과를 볼 수 없다고 생각했습니다. 이 솔루션이 너비와 높이를 고정하지 않는다는 사실은 이 솔루션을 사용한 후 상위 요소와 하위 요소의 너비와 높이가 변경되어도 가로 및 세로 중심 위치가 여전히 보장될 수 있음을 의미합니다.
다음 네 가지 솔루션은 모두 달성 가능합니다. 상위 요소 또는 하위 요소의 너비와 높이가 변경되면 가로 및 세로 중심 레이아웃이 계속 유지됩니다.
html
<p class="father"> <p class="son"></p> </p>
css
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}
html 변경되지 않음
<p class="father"> <p class="son"></p> </p>
css
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
표시할 상위 요소를 설정해야 합니다:table- 셀, 수직 및 텍스트 정렬을 사용하여 모든 인라인 블록 수준 요소를 수평 및 수직으로 가운데에 배치합니다
하위 요소에 대한 표시 설정: inline-block
html 변경되지 않음
<p class="father"> <p class="son"></p> </p>
css
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
html은 변경되지 않음
<p class="father"> <p class="son"></p> </p>
css는 변경되지 않음
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}
관련 권장 사항:
HTML 요소의 가로 및 세로 가운데 맞춤을 설정하는 방법
가로 및 세로 가운데 맞춤을 달성하는 방법에 대한 CSS 코드 공유 및 양쪽 끝 정렬
CSS를 사용하여 수평 및 수직 중앙 정렬을 달성하는 여러 방법 소개
위 내용은 CSS에서 수평 및 수직 센터링을 달성하는 4가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!