Space Divs 水平和垂直居中环绕

【问题标题】：Space Divs horizontally and vertically in a centred wrapSpace Divs 水平和垂直居中环绕
【发布时间】：2013-05-06 15:09:54
【问题描述】：

我正在寻找类似于所示图像的东西：

我已经设法使#wrap 水平居中，但仅此而已... 任何帮助将不胜感激。

<style>
    #wrap
    {
    Margin-left:auto;
    Margin-right:auto;
    padding: 10px;
    }

    #content
    {
    padding: 10px;
    }
</style>

~~~

<body>
    <div id="wrap">

       <div id="content">
       1
       </div>
       <div id="content">
       2
       </div>
       <div id="content">
       3
       </div>

    </div> <!--end wrap-->
</body>

【问题讨论】：

标签： css centering spacing

【解决方案1】：

由于您正在使用块元素 (https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements)，因此您需要内部元素具有固定高度，以便您可以提供 position: absolute。此外，请记住元素的 ID 必须是唯一的。如果您想多次使用一个元素，请指定一个 class 名称，例如

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>

所以，对于整个问题，请查看http://jsfiddle.net/YFncP/253/

希望这会有所帮助。

【讨论】：