相对定位和绝对定位对齐答案

【问题标题】：Alignment with relative and absolute positioning相对定位和绝对定位对齐
【发布时间】：2013-06-21 18:09:19
【问题描述】：

如何将蓝色框居中放置在红色框内？我看到蓝色框的左侧正好在红色框的中间，但我想将整个蓝色框居中，而不是左侧。盒子的尺寸不是恒定的。无论盒子尺寸如何，我都想对齐。与here 一起玩的示例。谢谢！

HTML：

<div id="rel">
    <span id="abs">Why I'm not centered ?</span>
</div>

CSS：

#rel {
    position: relative;
    top: 10px;
    left: 20px;
    width: 400px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}

#abs {
    position: absolute;
    bottom: 15px;
    width: 300px;
    height: 200px;
    border: 1px solid blue;
}

【问题讨论】：

标签： html css css-position

【解决方案1】：

如果您能够将<span> 标记更改为<div>

<div id="rel">
    <div id="abs">Why I'm not centered ?</div>
</div>

那么这段 CSS 应该可以工作了。

#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }

#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }

我认为最好对封闭的盒子使用更多的自动化，因为如果您更改容器盒的大小，则需要较少的更改。

【讨论】：

【解决方案2】：

您可以将left:50px 添加到#abs，如果这就是您想要的...

#abs {
    position: absolute;
    bottom: 15px;
    width: 300px;
    height: 200px;
    border: 1px solid blue;
    left:50px;
}

【讨论】：

我的意思是这些盒子的尺寸是未知的。无论盒子的尺寸如何，我都想对齐。

【解决方案3】：

如果您要定义这样的尺寸（200 像素 x 300 像素和 300 像素 x 400 像素），可以按以下方式居中：

#rel {
    position: relative;
    top: 10px;
    left: 20px;
    width: 400px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}

#abs {
    position: absolute;
    width: 300px;
    height: 200px;
    border: 1px solid blue;
    margin: 49px 0 0 49px;
}

【讨论】：

您是否要使整个框居中？还是只是左/右居中？

【解决方案4】：

您可以在http://jsfiddle.net/NN68Z/96/查看我的解决方案

我对 css 做了以下操作

    #rel {
        position: relative;
        top: 10px;
        left: 20px;
        right: 20px;
        width: 400px;
        height: 300px;
        border: 1px solid red;
        text-align: center;

        display: table-cell;
        vertical-align: middle;
    }

    #abs {
        display: block;
        bottom: 15px;
        width: 300px;
        height: 200px;
        border: 1px solid blue;
        margin: 0 auto;
    }

【讨论】：

【解决方案5】：

这应该可行

#abs {
    position: absolute;
    left: auto;
    right: auto;
    bottom: 15px;
    width: 300px;
    height: 200px;
    border: 1px solid blue;
}

【讨论】：

左/右自动技巧（例如居中带边距的 div）在这里不起作用。