0

我有以下 html5 正文：

<body>
    <div id="container">
        <div class="content" id="topleft">topleft</div>
        <div class="content" id="topcenter">topcenter</div>
        <div class="content" id="topright">topright</div>
        <div class="content" id="centerleft">centerleft</div>
        <div class="content" id="centercenter">centercenter</div>
        <div class="content" id="centerright">centerright</div>
        <div class="content" id="bottomleft">bottomleft</div>
        <div class="content" id="bottomcenter">bottomcenter</div>
        <div class="content" id="bottomright">bottomright</div>
    </div>
</body>

我想实现一个看起来像这样的动态布局：

块元素对齐

每个内容元素都应相对于其父容器布置（停靠）在角落中，并且所有中心元素应在各自的侧面居中。父容器的大小或位置无关紧要，因此我不能使用绝对像素坐标进行定位。

这是我到目前为止所拥有的：

div#container {
    background: lightblue;
    position: relative;
    width: 500px;
    height: 500px;
}

div.content
{
    width: 100px;
    height: 100px;
    position: absolute;
    background: lightyellow;
    text-align: center;
    margin: auto;
}

div#topleft {
}

div#topcenter {
    right: 50%; /*obviously doesn't center*/
}

div#topright {
    right: 0px; 
}

div#centerleft {
    top: 50%; /*obviously doesn't center*/
    left: 0px;
}

div#centercenter {
    top: 50%; /*obviously doesn't center*/
    right: 50%; /*obviously doesn't center*/
}

div#centerright {
    right: 0px;
    top: 50%; /*obviously doesn't center*/
}

div#bottomleft {
    bottom: 0px;
}

div#bottomcenter {
    bottom: 0px;
    right: 50%; /*obviously doesn't center*/
}

div#bottomright {
    right: 0px;
    bottom: 0px;
}

这一切都适用于角落，但当然所有中心元素都没有居中对齐，我明白为什么。我只是不知道，这是如何在 CSS3 中完成的......

4

1 回答 1

1

要在其父元素中垂直居中固定高度元素，请使用：

top:50%;
margin-top:-50px;

对于水平，您可以对 left 和 margin-left 执行相同的操作，或者只是不定义任何内容并使用“margin：0 auto”，因为它会自动将它们左右相等地填充。

于 2013-04-12T22:11:42.310 回答