CSS로 div 가운데 두기
한 줄의 CSS 코드를 사용해서 div 가운데 두기가 가능하면 좋겠지만 아직 찾지 못했다. 대신 여러 줄의 코드를 사용하여 가운데 두고 있다. 5가지 방법을 정리했다. 아래와 같은 중첩된 div 가 있다고 가정하고 안쪽 div를 바깥쪽 div의 가운데에 두겠다.
a. padding
바깥 div의 padding만 설정하면 된다. 바깥, 안쪽 div 크기를 알아야 한다. 아래처럼 좌우 padding 영역을 계산할 수 있다.
calc(100px / 2 - (20px / 2))b. translate
안쪽 div만 설정하면 된다. translate CSS function을 사용하여 x, y 위치를 가운데로 지정한다. 바깥 div의 크기를 알아야 한다. 아래 수식을 사용한다.
calc(50px - (100% / 2)), calc(50px - (100% / 2))c. flex
바깥 div만 설정하면 된다. flex 사용과 함께 align-items, justify-content를 사용한다. align-items:center로 위아래 가운데를 맞추고 justify-content:center로 좌우의 가운데를 맞춘다.
d. grid
바깥 div만 설정하면 된다. gird 사용과 함께 place-items:center를 사용한다. 가장 적은 코드를 사용하는 방법이다.
e. position
position을 사용한다. 바깥 div에 relative를 설정하고 안쪽 div에 absolute를 설정한다. top, left만 사용함으로 안쪽 div의 position을 relative로 변경해도 똑같다. 이제 안쪽 div에 top, left에 아래 수식을 계산된 위치를 넣는다.
calc(50% - 10px)f. flex and margin
flex를 사용하고 안쪽 div에 마진을 auto로 잡는 방법도 있다.
다른 방법도 있을 것이다. 알려주길 바란다.
