수평정렬(Horizontal Align)

inline/inline-block 요소

inline

--->정렬 대상요소(텍스트 또는 링크 등의 인라인 레벨 요소 또는 인라인 블록 요소)의 부모 요소에 text-align: center를 지정

block요소

block

--->블록요소의 너비를 명시하고 자기자신이 margin: 0 auto 값을 가지면 됨

복수의 block 요소

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima doloremque, in unde suscipit rerum numquam molestias consectetur ex officiis, illo, dolorum dolorem.
Lorem ipsum dololit. Minima doloremque, incidunt ratione accusamuiis, illo, dolorum dolorem.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima doloremque, incidunt ratiearum eaque assumenda impedit vel unde suscipit rerum num dolorem.

정렬대상에 수평으로 열거하기 위해 넓이를 주고 부모요소에 text-align:center지정

floxbox

flexbox
flexbox
flexbox
flexbox

수직정렬(Vertical Align)

slingle line 높이가 없을 때

나는 링크얌 인라인요소얌

높이가 있을 때

나는 링크얌 인라인요소얌

Multiple lines

자식요소 자식요소 자식요소 자식요소

flexbox

자식요소1
자식요소1

block요소

높이가 고정되어 있는 경우

높이가 고정되어 있지 않은 경우

Lorem ipsum dolor sit amet consectetusectetur adipisicsectetur adipisicsectetur adipisicos qui?

flexbox block 가운데 보내기

수직/수평 정렬