[ CSS 응용 ] DIV 중앙정렬 방법 총정리

| 개요

사이트를 디자인 하다보면 여러가지 정렬방식들이 기초적인 text-align속성과 position속성으로 정렬을 할 수 있다고 설명을 해드린적이 있습니다. 그렇다면 이번엔 조금 더 들어가 Div객체를 화면에 중앙에 정렬할 수 있는 부분을 살펴 보겠습니다. 여러가지의 방법들을 모두 정리하면 좋겠지만 많이 쓰여지는 방법을 정리해보도록 하겠습니다.

 

 

| 예제

 

1. position:absolute와 margin값을 이용한 중앙정렬

 

이 내용의 장점이라함은 모든 브라우저상에서 표현이 가능합니다. 단, 고정적인 width값과 height값이 있어야지만 가능한 상태입니다. (IE7 이상)

 

HTML부분

<div class="d_container">
   <div class="div_box">box</div>
</div>

위와 같이 "container"라는 div 안에서 "div_box"라는 div를 중앙정렬 하기 위해 먼저 html을 정리합니다.

 

 

CSS부분

.d_container { 
   position: relative; 
   width: 300px; 
   height: 200px; 
   background: #ddd; 
}
.div_box { 
   position: absolute; 
   width: 100px; 
   height: 100px; 
   background: #f00;
   color:#fff;
}

일단, 부모객체인 container div에 position:relative 값을 주고 해당 div의 크기, 그리고 구분하기 위해 배경색상을 그레이로 주었습니다. 또 자식객체인 div_box div에 position:absolute 값을 주고 해당 div의 크기, 그리고 배경색상 레드를 주고 해당 div안 텍스트 색상을 흰색으로 주었습니다. 

 

위 내용을 미리보면 아래와 같은 형태로 표현이 될것입니다.

 

 

box

 

그러면 이제 이 형태에서 안에 빨간 div 중앙정렬을 계속 해보겠습니다.

 

CSS부분

 

.div_box { 
   position: absolute; 
   width: 100px; 
   height: 100px; 
   background: #f00;
   color:#fff;
   top: 50%;
   left: 50%;
   margin: -50px 0 0 -50px; /*margin:auto를 이용해도 동일*/
}

 

아까 CSS내용 중 div_box에 top, left부분을 50%씩 위치를 이동시켜주고, div_box의 크기의 절반값씩만 margin을 이용 "마이너스"를 이용하여 다시 위치시켜주면 부모객체에서 중앙에 위치하는것을 볼 수 있습니다.

 

box

box

 

위 이미지를 보시면 이해 하시기 쉽게 투명 div를 하나 더 넣어두었는데, 처음 top, left 50%만 주었을 경우에 위치하는 곳 입니다.

해당 위치에서 이동한 객체의 width값과 height값의 절반만큼 margin을 이용하여 다시 올려주면 중앙정렬을 할 수 있게 되는 것입니다.

물론 width값과 height값을 %나 em등의 단위를 이용하여 변형되는 사이즈를 이용하게 되면 반응형까지도 구현(물론 해당 이미지의 사이즈까지 같이 변형이 되겠지요)이 가능하지만 반응되는 고정된 사이즈의 상태에선 반응구현은 쉽지 않습니다.

 

 

2. table, table-cell, inline-block을 이용한 중앙정렬

 

이 내용의 장점이라함은 자식객체의 크기값이 고정이 아니여도 자동으로 중앙정렬을 잡아줄수 있습니다. 하지만 이 내용을 구현할때엔 html구조에서 여러번의 중첩된 구조를 가지고 가야합니다. (IE8 이상)

 

HTML부분

<div class="a_layer">
  <div class="a_layer_inner">
    <div class="a_content">hello d2 design</div>
  </div>
</div>

CSS 부분

 

.a_layer {
   display: table;
   width: 300px;
   height: 200px;
   background: #ddd;
}
.a_layer_inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle
}
.a_content {
   display: inline-block;
   background: #f00;
   color:#fff;
}

 

Html구조를 보시면 총 3개의 div구조를 가지고 있고 각 구조별로 display의 table, table-cell, inline-block값을 가지고 있는걸 확인 하실 수 있습니다. 

첫번째 "a_layer"값은 "display:table"이란 값만 있으면 되고, 

두번째 "a_layer_inner"에는 "display:table-cell"과 "vertical-align:middle" 의 값으로 위 div의 상하중앙에 위치를 잡아주게 됩니다.

세번째 "a_content"에는 "display:inline-block" 값으로 좌우중앙에 위치를 잡아주게 됩니다.

 

 

hello d2 design

 

 

이 내용을 잘 응용한다면 마지막 세번째 div안에 여러개의 요소들을 집어넣어 모두 다같이 중앙정렬로 위치할 수 있습니다.

 

HTML부분

 

<div class="a_layer">
  <div class="a_layer_inner">
    <div class="a_content">
       <div class="box_a">A</div>
       <div class="box_b">B</div>
       <div class="box_c">C</div>
    </div>
  </div>
</div>

 

CSS 부분

 

.a_layer {
   display: table;
   width: 300px;
   height: 200px;
   background: #ddd;
}
.a_layer_inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
.a_content {
   display: inline-block;
   color:#fff;
}
.box_a, .box_b, .box_c { 
   width: 50px; 
   height: 50px; 
   background: #f00; 
   color: #fff; 
   text-align: center; 
   float: left; 
   margin-right: 2px; 
}

 

 

위 응용한 내용을 보시면 아래와 같이 위치 시킬 수 도 있습니다.

 

A

B

C

 

 

 

3. transform을 이용한 중앙정렬

 

이 내용의 장점은 정말 간결하고 짧은 코딩으로 처리할 수 있습니다. 그리고 안의 내용물이 크기값이 변형이 되더라도 중앙정렬이 됩니다. 하지만 익스플로러 9 이상의 브라우저에서 호환이 되기 때문에 아직까지 익스플로러 낮은버전의 유저에게는 표현되지 않습니다. 그래서 모바일용에서 사용이 유용합니다. (모바일 기종별로 간혹 폰트가 약간 흐려보이는 버그가 있다고 하네요,)

 

HTML부분

<div class="z_container">
   <div class="z_box">box</div>
</div>

CSS 부분

.z_container { 
   position: relative;
   width: 300px;
   height: 200px;
   background: #ddd;
}
.z_box {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #f00;
  transform: translate(-50%, -50%)
}

 

위 내용을 보면 굉장히 간략한 정의로 컨텐츠 내용의 크기가 무관하게 알아서 50%씩을 잡아 재위치 시켜주니 편리하게 사용할 수 있는 코드입니다. 위 내용의 결과물은 다른 내용과 마찬가지로 나옵니다.

 

box

 

역시나 여러가지 또 다른 경우들이 있지만 가장 많이 사용중인 대표적인것들만 소개해드려봤습니다.

코딩할때의 상황, 보여주는 상황에 맞춰서 선택하여 사용하시면 되겠습니다.