[css]div 세로 가운데 정렬하는 방법

css에서 가로정렬은 어렵지 않으나, 많이들 새로 정렬을 어려워한다.

나도 아직도 잘모르니만, 그래도 아는 만큼만 적어보장

div의 새로 정렬하는 방법은 찾아보니 다양한 방법이 있었다. 하지만 

모든 브라우저에서 잘 작동하고 내가 자주 쓰는 방법ㅋㅋㅋ만 적어봐야지

1. 세로정렬 하는 방법1- line-height 이용

* 이럴때 쓰세요! 

  - 텍스트 세로 정렬 할때!

  - 버튼 만들때! 

<주의>근데 한줄이상이면 깨지고, 글씨체가 섞이거나 한글일 때 가끔씩 몇픽셀씩 안맞을 때가 있어요.

방법.

1. height 와 line-height를 동일한 값으로 준다.

HTML

 <div class="box">
            새로 정렬을 해보아용
        </div>

CSS

  .box{width: 300px;height: 100px;line-height:100px;}

구현된 모습!

2. 세로정렬 하는 방법2- position 이용

* 이럴때 쓰세요! 

  - 가운데 정렬하려는 요소의 height가 고정값일때

  - 감싸주는 div가 필요없음(body전체에서 가운데 정렬하려 할때?)

<주의>내용이 많으면 짤릴수 있음.(근데 짤린적 별로 없던것 같음)

방법.

1. 가운데 정렬할 요소(div.box)에 position: absolute를 준다.

2. top값을 50%준다.

3. 요소의 높이값의 반(요소의 height가 100px이라면 50px)만큼 margin-top의 마이너스 값을 준다.

HTML

        <div class="box">
            새로 정렬을 해보아용
        </div>

CSS

  body{position:relative}
        .box{position: absolute;top: 50%;margin-top: -50px;
                width: 300px;height: 100px;}

구현된 모습!

3. 세로정렬 하는 방법3- 요소앞에 가상공간 만들기

* 이럴때 쓰세요! 

  - 가운데 정렬하려는 요소의 height가 고정값일때

  - 감싸주는 div가 필요없음(body전체에서 가운데 정렬하려 할때?)

방법.

1. 가운데 정렬할 요소 앞에 임의에 요소(div.v-box)를 하나 더 만들어준다.

2. div.v-box에게 float:left; height:50%;를 주고 margin-bottom를 가운데 정렬할 요소 높이값의 반 만큼 마이너스값을 준다.

(div.box의 height가 100px이니 margin-bottom:-50px를 준다.

3. 가운데 정렬할 요소(div.box)에게 clear:left;position: relative를 준다. 

HTML

    <div class="v_box"></div>
     <div class="box">
            세로 정렬을 해보아용
     </div>

CSS

 html,body{height:100%}
        .box_wrap{float:left;height:50%;margin-bottom:-50px;}
        .box{width: 300px;height: 100px;clear:left;position: relative;}

구현된 모습!

그 외 세로 정렬방법

1. padding 이용하기

2. display:table 이용하기

**열심히 적었으나 오류가 있을 수 있으니 너무 신뢰하지 마세요:) ㅎㅎ

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