| CSS | 중앙정렬 모든 것(전체,수평,수직)

"왜... 가운데로 안가지?"
인라인요소 or 블럭요소에 따라 달라지기 때문에 각각마다 고려해야할 상황들에 대해 정리해보았다! 
부모요소 height 속성을 100vh 설정해줘야한다.
( 안그러면 부모요소가 컨텐츠 높이만큼 차지하기 때문에) 

---

중앙정렬: margin

• 가장 많이 사용하는 방법
• 부모요소 display: flex;
• 자식요소 margin : auto; 

See the Pen Untitled by Webin (@hyebin-woo) on CodePen.

 

 

---

중앙정렬: position

• 부모요소 position:relative; ( 지정해주지 않을 시 최상위 요소 body가 기준점이 된다)
• 자식요소 postition:absolute; 
  • top:50;  left:50; 
  • : 가운데로 정렬하기 
  • transform: translate(-50%, -50%) 
  • : 내 너비의 50% 만큼 x축을 따라 왼쪽으로 이동하고, 내 높이의 50%만큼 y축을 따라 위로 이동

See the Pen Untitled by Webin (@hyebin-woo) on CodePen.

 

 

---

중앙정렬: flex

• 부모요소 
• display: flex;
• justify-content: center; (가로선 기준)
• align-items: center; (세로선 기준)

하지만 flex 방법은 IE 지원하지 않는 속성들도 있기 때문에 사용시 고려해야 한다.

See the Pen Untitled by Webin (@hyebin-woo) on CodePen.

 

 

---

중앙정렬: Grid

: ...grid는 너무 간단하다..

align-item 과 justify-items 속성을 한번에 적용할 수 있도록 하는 place-items 속성이 있다.

하지만 grid도 지원하지않는 브라우저가 많기때문에 사용시 고려해야한다.

• 부모요소
• display:grid
• place-items: center

See the Pen Untitled by Webin (@hyebin-woo) on CodePen.

---