●HTML
<div class="c_japan"><p>日本</p>
<div class="c_kantou"><p>関東</p>
<div class="c_tokyo">東京</div>
<div class="c_kanagawa">神奈川</div>
<p>かんとう</p>
</div><!-- end of c_kantou -->
<p>にっぽん</p>
</div><!-- end of c_japan -->
●CSS
.c_japan{
background-color:#FF0000;
width:800px;
margin:auto;
}
.c_kantou{
background-color:#0000FF;
width:600px;
margin:auto;
}
.c_tokyo{
background-color:chartreuse;
width:200px;
float:left;
}
.c_kanagawa{
background-color:lightcoral;
}
●解説
東京と神奈川をfloatで横並びにして、それらを関東で囲み、
かつ、関東にmargin:auto;で中央寄せを適用すると、
横並びにしたdiv全体を中央に配置できる。
サンプルソース
