[css]div 가로 중앙 정렬 하는 방법

가로 중앙 정렬 하는 방법(세로정렬은 다른 포스팅에 있어요! )

세로정렬포스팅 -> div 세로 가운데 정렬하는 방법

요소를 가로 정렬하는 방법은 몇가지가 있다. 그런데 css초창기 어떤 방법을 적용해야하는지 또 왜 적용이 되지 않느지에 대해 혼란스러웠던 기억이 있다. 그래서 가운데 정렬하는 방법과 어떤 상황에 쓰면 좋은지 적어보려고 한다.

01. text-align: center

가장 기본적이고 쉬운 방법입니다. 

- text-align은 블럭요소 안에 있는 인라인 요소에게 적용됩니다. 

인라인 요소는 다음이 있어요.

- b, big, i, small, tt

- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var

- a, bdo, br, img, map, object, q, script, span, sub, sup

- button, input, label, select, textarea

인라인요소가 아닌 요소를 text-align을 적용하기 위해 block요소를 inline-block요소로 바꿔주기도 합니다.

ex)

html

<div class="box1">
    <div class="box2">
    </div>
</div>

css

.box1{text-aglin:center}
.box2{display:inline-block}

가운데 정렬하고 싶은 div는 블록요소에서 인라인블록요소로 바꿔주고, 부모에게 text-aglin:center를 주면 가운데 정렬이 됩니다. 

02. magrin: auto

가장 많이 쓰는 방법 중 하나입니다. 

- 가로 사이즈가 지정되어 있고, block요소에게 적용가능합니다. ( 세로는 적용되지 않는다. )

가로 사이즈를 지정되어 있나면 나머지 여백을 오른쪽 왼쪽 마진이 반반씩 채워주며 가운데 정렬이 됩니다.. 

css

box1{width:200px; margin: 0 auto}

03. position:absolute

- 위에 상황들이 적용되지 않을때 많이 사용한다. position : absolute를 주고, left:50%주어 가운데로 밀어냅니다. 

그리면 요소의 왼쪽을 기준으로 가운정렬이 된다. 이때 요소의 가로의 반값 만큼 마진을 이용해 왼쪽으로 보내면 가운데 정렬이 됩니다.

다시 설명하면,

가로가 100px인 박스에게

- position:absolute; 주고

- left:50%를 주어 박스의 왼쪽을 기준으로 가운데 정렬을 맞춥니다.

그리고 margin-left를 이용해서 박스 가로의 반만 왼쪽으로 다시 가지고 옵니다.

box의 width의 반은 50px입니다. 

그래서 margin-left:-50%를 주면 가운데 정렬이 됩니다. 

세로정렬포스팅 -> div 세로 가운데 정렬하는 방법