[CSS3] 정렬을 하는 여러가지 방법

1. text-align: center;

text-align: center;

가로로 가운데 정렬 (텍스트나 inline으로 된 엘리먼트에 적용된다. )

 

2. margin : 0 auto;

display: block;
margin : 0 auto;

엘리먼트 가운데 정렬, 

엘리먼트 양쪽의 마진을 자동으로 계산해서 중앙에 위치하도록 한다.(display:block 이고 position이 설정되지 않았을때 사용한다)

 

 

3. vertical-align : middle;

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

세로로 가운데 정렬 span 태그와 같은 inline 요소에 사용되며

display:table-cell로 만들어 사용할 수도 있다.

상대적인 정렬이다.

 

4. line-height : 100px;

line-height : 100px;

높이가 100px을 기준으로 세로 가운데 정렬된다.

두줄이상의 경우 각각의 줄마다 100px 기준으로 세로가운데 정렬되므로 영역안에 1줄의 텍스트만 있을 경우에 쓴다. 

아래에서 확인 가능!

 

 

 

 

5. transform 이용하기

position : absolute;
top:50%; 
left: 50%;
transform: translateY(-50%,-50%);

 

위에서 전체 영역기준으로 50%이동(top) 왼쪽에서 전체영역 기준으로 50% 이동 (left)

그리고 자기 자신크기의 절반만큼 다시 위와 왼쪽으로 이동하면 가운데 정렬이 된다.

 

 

6. flex 이용하기

 

가운데정렬

display: flex;
justify-content: center; //가로가운데
align-items: center;//세로가운데

기타 flex 로 정렬하는방법