CSS 가운데 정렬하는 방법 총정리

Question

CSS로 가운데 정렬하는 방법이 너무 많아서 헷갈립니다. text-align, margin auto, flexbox, position absolute 등등... 상황별로 어떤 방법을 써야 하는지 정리해주실 수 있나요?

프론트수진 · Accepted Answer

상황별 정리입니다:

**인라인 요소 가로 정렬**: `text-align: center;`
**블록 요소 가로 정렬**: `margin: 0 auto;` (width 필수)
**수직 + 수평 정렬 (Flexbox)**:
```css
display: flex;
justify-content: center;
align-items: center;
```
**수직 + 수평 정렬 (absolute)**:
```css
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
```

2018년 기준 Flexbox가 가장 무난합니다.

김영삼 · Answer

CSS Grid도 한 줄이면 됩니다: `display: grid; place-items: center;` 브라우저 지원만 확인하세요.

댓글 3