CSS로 div 가운데 두기

Codepen Examples

한 줄의 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로 잡는 방법도 있다.

다른 방법도 있을 것이다. 알려주길 바란다.

--

--

JavaScript Developer, https://afrontend.github.io/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store