가운데 정렬법

Posted by 이상한 나라의 채소토끼
2018. 1. 31. 13:33 카테고리 없음

텍스트를 가운데 정렬하는 방법



블록요소를 가운데 정렬하는 방법 7가지 (샘이 알려준)


1 블록 구조일떼 h100vh lh 100vh margin 0 auto

2 인라인 구조일때 tac  h100vh lh 100vh 

3. 포지션1 width 를 알고있을때 poa l50 t50 

4 포지션2 width 를 모를때 poa l505 t50%  transform:translate(-50%,-50%); 

4-2 poa t50p w100p transform:translatey(-50%)

5 포지션3 poa t0 b0 l0 r0 margin:auto;

5-2 포지션, 영역 살아있게, por t50p w100p transform:translatey(-50%)

6. display: flex; 이용 , justify-content:center; , align-items:center height:100vh

7 table을 이용. .table { display: table; width: 100%; height: 100%;}  .icon-wrapper { display: table-cell;  text-align: center;  vertical-align: middle; }


참조  자세함