관리 메뉴

웹개발자의 기지개

[css] 중앙정렬 3가지 방법 본문

웹퍼블리싱/CSS

[css] 중앙정렬 3가지 방법

http://portfolio.wonpaper.net 2020. 9. 3. 11:33

 

1. left: 50%; (%는 부모요소를 기준)

   margin-left: -25px;

 

2. left: calc(50% - 25px);

 

3. 부모요소가 유동적이고, 자식요소도 유동적일때,

   left: 50%;

   transform: translateX(-50%);

 

 

3번이 가장 이상적, 모바일에서는 가장 최신 html내용을 반영하므로, 가장 적합함

Comments