[CSS] div안에서 가로/세로 가운데 정렬

가운데 정렬 하면 가장 많이 생각 나는것이 text-align:center 혹은 margin:0 auto; 이다.

둘다 가로 가운데 정렬 할때 가장 많이 사용하는 것들이다.

그런데 세로 가운데 정렬 하려면 어떻게 해야 할까?? 폭풍 검색후 몇가지 방법을 찾아냈다.

display:table 을 이용한 가운데 정렬

 - 이전에 쓴글을 참고하자.

 - 이방법을 실제로 적용해 보니 편한 방법이긴 display 속성을 건들여야 하는 방법이어서 제약이 많을 것 같다.

   실제로 적용 해봤는데 마크업이 단순한 경우에는 편리한데 복잡한 마크업으로 페이지를 만들었을 경우에는 

   안되는 경우가 많은 것 같다.

position을 이용한 가운데 정렬_Type 01

div { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }

    

세로만 가운데 정렬을 하고 싶으면 

{ margin:auto 0; }

position을 이용한 가운데 정렬_Type 02

html : 

<div class="outer">
    <div class="inner">
        Put here your text or div content!
    </div>
</div>

css:

.outer {
  position:relative;
  text-align:center;
  width:100%;
  height:150px; /*  Any height is allowed, also in %. */
  background:gray; /* 구분을 위한 배경색 */
}

.outer .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red; /* 구분을 위한 배경색 */
}

 - 지금까지 사용해본것중 제일 적용이 잘 되는듯 하다.

 - IE9 버전 까지 적용 된다. 

 - 썸네일 정렬 시킬때 유용하게 쓰일것 같다.

 -  출처 : https://code.i-harness.com/ko/q/63088c