html - 幅 100% の div で div を中央に配置する

Question

これは私が持っているものです:

http://jsfiddle.net/kRUBY/

<style>
div.box {
    width:400px;
    height:200px;
    float:left;
}
</style>

<div style="width:100%; height:200px; overflow:hidden;">

    <div style="width:2000px; height:200px;">
        <div class="box" style="background:red;"></div>
        <div class="box" style="background:blue;"></div>
        <div class="box" style="background:yellow;"></div>
        <div class="box" style="background:orange;"></div>
        <div class="box" style="background:black;"></div>
    </div>

</div>

ページのサイズが変更されても、2000px の div のコンテンツを中央に配置したいので、黄色の div は常に画面の中央にあります。

cssのみでこれを行うことは可能ですか？

Answer 1

<div style="width:100%; height:200px; overflow:hidden;">
    <div style="width:2000px; height:200px;position: relative; left: 50%; margin-left: -1000px">
        <div style="width:400px; height:200px; float:left; background:red;"></div>
        <div style="width:400px; height:200px; float:left; background:blue;"></div>
        <div style="width:400px; height:200px; float:left; background:yellow;"></div>
        <div style="width:400px; height:200px; float:left; background:orange;"></div>
        <div style="width:400px; height:200px; float:left; background:black;"></div>
    </div>
</div>​

リンクはこちら

Answer 2

margin: auto;2000px divに入れます