[ CSS ] div 가운데 정렬, 중앙 정렬
오늘은 div 내에서 글씨를 정 가운데 배치하는 방법을 말하고자 한다.
div 내에서 글씨를 정가운데 배치하려면 가로 정렬, 세로 정렬을 진행해야 한다.
가로 가운데 정렬은 text-align속성의 값을 "center"로 정해주면 된다.
세로 가운데 정렬은 먼저 div속성을 "table-cell"로 변경하고 vertical-align속성의 값을 "middle"로 정해주면 된다.
아래와 같이 적용하면 가로 200px, 세로 200px인 div안에 글씨가 가운데 정렬되어 배치된다.
<style>
div {
width:200px;
height:200px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
</style>
<div id="capture">
ABCD
</div>
반응형