CSS에서 요소를 세로 방향으로 중앙에 배치하고 싶다면, 가장 간단한 방법 중 하나는 위쪽(top)과 아래쪽(bottom) 패딩(padding)을 활용하는 것입니다. 요소의 상하에 동일한 여백을 주면 내용이 자연스럽게 수직 중앙에 위치하게 됩니다.
예제 코드
아래 코드를 실행하면 div 요소가 세로로 중앙 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 50px 0;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>세로 중앙 정렬</h2>
<p>이 예제에서는 padding 속성을 사용하여 div 요소를 세로로 중앙 정렬합니다:</p>
<div class = "center">
<p>저는 세로 중앙에 정렬되어 있습니다.</p>
</div>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 파란색 테두리를 가진 div 영역 안에서 텍스트가 상하 50px의 동일한 패딩 덕분에 세로 중앙에 배치된 것을 볼 수 있습니다.
이처럼 padding 속성은 별도의 추가 기술 없이도 간단히 수직 정렬 효과를 낼 수 있는 유용한 방법입니다. 다만 콘텐츠의 높이가 고정적일 때 적합하며, 더 유연한 정렬이 필요하다면 flexbox나 grid 레이아웃을 함께 고려해 보는 것이 좋습니다.