링크 복사
문제 보고
<div>를 가운데(가로, 세로)로 정렬하는 방법은 무엇인가요?
<div style="width: 400px">hello</div> 의견 (0)
더 많은 의견 보기
CSS 가운데 정렬 방법
답글 (1)
링크 복사
문제 보고
가로(수평) 가운데 정렬: block
margin-left와 margin-right를 auto로 설정하면 가로로 가운데 정렬할 수 있어요.
<style>
.element {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<div class="element" style="width: 400px">hello</div>가로(수평) 가운데 정렬: inline-block
inline-block 엘리먼트(링크 등)는 부모의 text-align을 center으로 설정하면 가로로 가운데 정렬할 수 있어요.
<style>
.parent { text-align: center; }
.child { display: inline-block; }
</style>
<div class="parent">
<div class="child" style="width: 400px">hello</div>
</div>세로(수직) 가운데 정렬: 높이를 알고 있는 경우
가운데로 정렬될 엘리먼트의 높이를 알고 있는 경우 top을 50%로 하고 margin-top을 (높이 * -0.5) 로 하면 세로로 가운데 정렬할 수 있어요.
position: absolute도 잊지 마세요.
<style>
.parent { position: relative; }
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* (높이 * -0.5) */
}
</style>
<div class="parent" style="height: 400px">
<div class="child">hello</div>
</div>세로(수직) 가운데 정렬: 높이를 모르는 경우
가운데로 정렬될 엘리먼트의 높이를 모르는 경우 top을 50%로 하고 transform: translateY()를 -50%로 해서 세로로 가운데 정렬할 수 있어요.
(margin: auto를 사용할 수 없을 때는 같은 원리로 left를 50%로 하고 transform: translateX()를 -50%로 하면 가로로 가운데 정렬할 수도 있어요.)
<style>
.element {
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="element">hello</div> 의견 (0)