[css] 중앙정렬 시 사용되는 코드 모음

방법 1.

margin : 0 , auto 를 주면 중앙정렬이 가능하다.

상하 / 좌우

 block요소인 div가 한줄을 다 차지하고 있다 - 이 부분이 auto로 설정할 수 있는 영역

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

방법2.

text-align : center 이용하기

이는 1) 자식인 inline요소 2) 자식인 block요소 3) 자식인 inline-block요소 4) text 에서 적용가능하다.

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

방법3.

relative , transform: translateX(-50%)와 left(50%) 이용
자기자신의 margin에 영향을 받을 수 있다.

 

See the Pen Untitled by mandelina (@mandelina) on CodePen.

 

 

그밖에 ,

---

 

1 .텍스트 중앙정렬

블럭요소 안에 있는 인라인요소인 텍스트 요소 중앙정렬 text-align : center

 

---

2.

display : flex

justify-content: center;

 

---

3.

부모에 text-align : center

자식에 display: inline-block할경우

자식이 inline속성을 가지게 되어 중앙정렬 가능

 

.

.

.

.

(글 수정중)