DIV내에 있는 문자열을 수평 중앙 정렬하는 방법은 text-align을 사용해 간단히 해결된다. 아래의 예를 살펴보자.

<style>
.h-arrange {
    width: 200px;
    height: 100px;
    border: 1px solid yellow;
    background-color: yellow;

    text-align: center;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -60px;
}
</style>
  
<div class="h-arrange">문자열 수평/중앙정렬</div>

조심해야 할 점은 text-align은 Block요소안에 있는 Inline요소에만 반영(선언은 해당 Block요소에 한다.)된다. 만일 block요소를 중앙정렬하기 위해서는 반드시 display: inline;등을 사용하여 Inline요소로 변환 후 사용해야 정확한 중앙정렬이 가능하다.

우선 많은 사람들이 자주 사용하는 display: table;과 display:table-cell;을 이용하는 방법을 알아보자. 이를 사용하기 위해서는 부모/자식의 형태로 해당 컨텐츠를 구성하여야 한다.

<style>
.toTable {
display: table;
    width: 200px;
    height: 100px;
    border: 1px solid yellow;
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

.echo {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>

<div class="toTable">
    <p class="echo">문자열 수평/수직/중앙정렬</p>
</div>

이때 조심해야 될 부분은 아래와 같다.

    1. 부모요소엔 display: table;을, 자식요소엔 display:table-cell;을 적용해야한다. (display:table; 대신 display: inline-table; 사용가능)

    2. 부모요소는 크기가 명확히 표시되어야 한다. (height, width등의 값이 반드시 있어야한다.)

    3. IE7 이하 버전에서는 display:table, table-cell이 지원되지 않기 때문에 적용되지 않는다.