[CSS] 요소 수평 / 수직 정렬하기

inline / inline block / block/  multiple block / Flexbox에 따라 각자 다르게 css를 세팅해줘야 한다.

 

inline

ex) <span> <a> <em> ...

줄글을 계속된 한 줄로 취급함

margin, padding은 좌우 간격만 반영이 됨

block

ex) <div> <p> <h1> ...

줄글을 하나의 블럭으로 처리함

위아래로 조절을 하면 서로 겹침

margin, padding 상하좌우 모두 반영이 됨

inline block

ex) <button> <input> <select> ...

inline과 block을 합쳐놓은 것으로 생각하면 됨

줄글을 계속된 한 줄로 취급함

margin, padding 상하좌우 모두 반영이 됨

Flexbox

하나의 큰 통이 생기게 됨

그 통 안에 여러 요소를 같은 간격으로 집어넣을 때 사용

 

수평 정렬

inline & inline block

text.align: center;

텍스트 요소를 수평의 중앙, 그러니까, 가로 중앙으로 맞춰 줌

block

width: [원하는너비]; //너비를 지정하지 않는 경우에는 full width가 되어 중앙 정렬이 필요 없음
margin: [가로] auto;

multiple block (여러 block요소)

text-align: center;

width: [원하는너비];
display: inline-block;

Flexbox

display: flex;
justify-content: center; //가로축-중심축의 컨텐츠, 요소들을 중앙으로 정렬

 

수직 정렬

inline & inline block

한 줄

padding: [원하는 값];

또는

height: [원하는 값];
line-heignt: [원하는 값];

여러 줄

table을 사용한 방법

//부모에게

display: table;
height: [원하는 값];

//자식에게

display: table-cell;
vertical-align: middle;

vertical-align을 이용한 방법

vertical-align이란?

 

수직정렬을 위해 사용하는 요소

vertical-align에는 baseline/ top/ middle/ bottom/ sub/ text-top등의 요소가 있으며, 그 중 middle이 수직 중앙 정렬을 해줌

vertical-align: middle;

Flexbox

display: flex;
justify-content: center;
flex-direction: column; //주축, 그러니까 어느 방향으로 컨텐츠를 나열한 것인가. 해당 코드는 세로 방향으로 컨텐츠를 나열한다.
height: [원하는 값];

block

컨텐츠의 높이가 고정된 경우

//부모에게

positon: relative;

//자식에게

position: relative;
top: 50%;
height: [원하는 값];
margin-top: -[height의 반];

컨텐츠의 높이가 고정되지 않은 경우

//부모에게

position: relative;

//자식에게

position:abdolute;
top: 50%;
transform: transformY(-50%); //컨텐츠의 높이의 반 만큼 위로 옮겨줌. 보이는 것만 이동하는 것 뿐, 절대 레이아웃상에서 움직이는 것이 아니다.

Flexbox

display: flex;
flex-direction: column;
justify-content: center;

 

수평 & 수직 정렬

//부모에게

position: relative;

//자식에게

postiion: absolute;
top: 50%;
left: 50%;
tranform: translate(-50%, -50%); //컨텐츠의 높이만큼 반, 너비만큼 반 위와 왼쪽으로 이동

 

 

ref. https://poiemaweb.com/css3-centering

CSS3 Horizontal & Vertical Centering | PoiemaWeb

https://dev-syhy.tistory.com/30

[CSS] flexbox 개념 및 속성 설명(flex-direction / flex-wrap / flex)

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

vertical-align - CSS: Cascading Style Sheets | MDN

https://velog.io/@mangozoo20/CSS-transform-%EB%B3%80%ED%98%95-%EC%A0%95%EB%A6%AC