CSS를 사용해 버튼을 수직 및 수평으로 가운데 정렬하려면 Flexbox(플렉스박스) 레이아웃을 활용하는 것이 가장 간단하고 효과적인 방법입니다. 부모 요소에 display: flex를 지정한 후, justify-content와 align-items 속성을 center로 설정하기만 하면 됩니다.
핵심 속성 살펴보기
- display: flex — 해당 요소를 플렉스 컨테이너로 만들어 자식 요소의 정렬을 제어할 수 있게 합니다.
- justify-content: center — 자식 요소를 가로 방향(주축) 기준으로 중앙에 배치합니다.
- align-items: center — 자식 요소를 세로 방향(교차축) 기준으로 중앙에 배치합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.centered {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid rgb(0, 70, 128);
}
button {
font-size: 18px;
border: none;
padding: 10px;
background-color: darkblue;
color: white;
}
</style>
</head>
<body>
<h1>가운데 정렬 예제</h1>
<div class="centered">
<button>이 버튼은 가운데 정렬되어 있습니다</button>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
추가 팁
버튼 하나만 정렬할 때는 위 방법이 충분하지만, 화면 전체를 기준으로 정렬하고 싶다면 부모 컨테이너의 height를 100vh로 설정하면 됩니다. 또한 최신 브라우저에서는 place-items: center를 사용하는 Grid 방식(display: grid)도 좋은 대안이 될 수 있습니다.