니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법

CSS에서의 가운데정렬이란 초심자에게 가장 헷갈리는 컨셉 중 하나이다.

인라인요소/블럭라인 요소에 따라 다르고, 또 같은 속성이라 하더라도 상황에 따라 되는게 있고 안되는게 있다(?)

 

오늘은 딱, 깔끔하게, 

거의 모든 상황에서 먹히는 4가지 중앙정렬 방법을 정리해보려 한다.

이 중에 상황에 따라+선호에 따라 맞춰 사용하면 되겠다.

 

---

전제조건

 

• 부모 div class="container" 안에 자식 div="box-1"을 만들었다.
• 정확한 결과를 위해, 적용된 마진 패딩값을 0으로 설정하고, box-sizing: border-box;를 준다.
• 뷰포트 안 어디라도 이동이 가능하기 위해 부모 cotainer div의 height를 100vh로 설정했다.

<div class="container">
 <div class="box-1"></div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
}

.box-1 {
  height: 120px;
  width: 120px;
  background-color: skyblue;
  border: 2px solid black;
  
}

완성! 중앙으로 보내보자.

---

1. Flexbox 이용하기

 

• 부모 container 에 display:flex를 적용해 준 다음
• 메인축의(가로선)을 기준으로 중간으로 보내버리는 justify-content: center; 와
• 반대축의(세로선)을 기준으로  중간으로 보내는 align-items: center; 를 적용한다.

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

See the Pen Centering with flexboc by Koreanhamster (@koreanhamster) on CodePen.

 

 

 

 

flex에 관해서는

https://jihyun-hamster.tistory.com/37  Flex 별 거 아냐 - 부모요소 편

(자식요소편은 업로드 예정)

포스팅이 있으니 참고하시라.

 

---

2. Grid 이용하기

 

• 부모 container 에 display:grid를 적용해 준 다음,
• 메인축의(가로선)을 기준으로 중간으로 보내버리는 justify-content: center; 와
• 반대축의(세로선)을 기준으로  중간으로 보내는 align-items: center; 를 적용한다.

 

 

.container {
height: 100vh;
display: grid;
justify-content: center;
align-content: center;
}

 

See the Pen centering with grid by Koreanhamster (@koreanhamster) on CodePen

 

---

3. Position 이용하기

 

Position은 부모요소에 position: relative; / 자식요소에 position: absolute; 속성을 부여하며

이제 여기(부모요소)가 니 무대야~ 여기 안에서만 놀아~ 라고 공간을 한정해주는 것이다.

 

그다음 중앙정렬을 위해서, 자식요소에

top: 50%; 을 주어 위에서부터 50%만큼(무대의 절반만큼) 밑으로 내려오게 해주고,

left: 50%; 을 주어 왼쪽에서부터 50%만큼 오른쪽으로 오게 해주면 가운데에 오지 않을까?

 

.box-1 {
  height: 120px;
  width: 120px;
  background-color: skyblue;
  border: 2px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
}

아니다. 박스는 아래와 같은 이상한 위치로 오게 된다.

이는 div박스의 특성 때문인데,

div박스는 '왼쪽 위 모서리'가 센터로 지정되어있다.

그럼 이 박스를 왼쪽 위로 어느정도 옮겨주어 박스의 중앙부분이 중심으로 오도록 해야겠지?

 

이를 해결하기 위해서는 transform: translate(-50%, -50%) 코드를 추가해주어야 한다.

.box-1 {
  height: 120px;
  width: 120px;
  background-color: skyblue;
  border: 2px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

사실 이  transform: translate(-50%, -50%)이 이해가 되질 않아 정말 많은 설명과 문서를 뒤졌는데, 가장 깔끔한 설명은 stack overflow에서 찾았다.

https://stackoverflow.com/questions/46184458/transform-translate-50-50/46184660#:~:text=The%20%2D50%25%20transform%20basically%20means,that%20in%20the%20y%2Daxis.

 

쉽게 말하자면

• 내 너비의 50%만큼만 x축을 따라서 왼쪽으로 옮겨줘!
• 내 높이의 50%만큼만 y축을 따라서 위로 옮겨줘!

라는 의미인 거다.

왼쪽 위로 내 반만큼만 옮겨줘!

 

See the Pen Position by Koreanhamster (@koreanhamster) on CodePen.

 

*추가

 

마찬가지로 만약 박스를 수평선 안에서 가운데 오게하고 싶을 때는

역시나 같은 방법으로 transform: translate(-50%)을 줘서 왼쪽으로 박스너비의 반만큼 이동시켜주면 깔끔하게 해결된다!

(수직선도 마찬가지겠죠?)

 

---

4.  Margin 이용하기

 

• 마진을 이용해서 가운데정렬을 할 때에는, 무조건! 부모 요소에 display: flex;를 주고 시작하자. 
• margin: auto; 를 주면 부모요소와 자식요소간의 빈 공간을 자동으로 차지하게 되어 중앙정렬이 된다.

 

See the Pen Untitled by Koreanhamster (@koreanhamster) on CodePen.

 

---

어느 상황에서 어느 중앙정렬이 가장 좋은지는 사실 경험치가 쌓여야만 한다고 생각한다.

하지만 위의 4가지 방식은 CSS를 다루는 데에 있어서 핵심적이기 때문에 꼭! 습득해두어야겠다.

 

아래는 큰 도움이 된 포스팅 링크와 영상(같은분)을 추가한다.

https://www.freecodecamp.org/news/how-to-center-objects-using-css/

How to Center Anything in CSS Using Flexbox and Grid ✨

https://www.youtube.com/watch?v=RTEzXS_CT5w