text-align:center;

margin:0 auto;

를 사용하면 대부분 원하는 정렬을 할수 있다.

그러나 가운데 정렬 속성이 float 정렬 속성을 만나면 float의 속성을 따라가 버리기 때문에 문제가 복잡해 진다.

해결책은 두가지가 있는데

첫째는 컨텐츠의 넓이가 비교적 정확히 정해져 픽셀값으로 뽑아낼수 있는 경우,

<div id="top" style="margin:0 auto; width:300px;">
 
    <div style="float:left">타이틀</div>

    <div style="float:left">본문</div>

</div>

라는 식으로 해결한다.

둘째는 컨텐츠의 넓이가 유동적일 경우, 대표적으로 브라우져의 사이즈가 다양한 모바일웹을 구현할 경우
가로넓이를 특정짓는것이 불가능할때 아래와 같이 적용한다.

<div>
<ul id="test">
    <li>아이유</li>
    <li>효느님</li>
    <li>수지</li>
    <li>리지</li>
    <li>돼지</li>
</ul>
</div>

div{margin:0 auto; width:80%(원하는 넓이의 % 대입);}

#test {
    float: right;
    position: relative;
    left: -50%;
}

#test li {
    float: left;
    position: relative;
    left: 50%;
}