Question

我有一个可变尺寸的div，我需要在其容器内动态水平居中。这是当前的结构...

<div class="outer">
    <div class="inner">Sample</div>
</div>

...“内部”div是基于其内容的高度和宽度非常高的div，它需要在“外部”div内水平居中（左右两侧的空间相等），其中可能有也可能没有固定尺寸（因此“内部”可能在“外部”div的宽度范围内，或者它可能会溢出，但始终以其为中心）。以下是我目前的款式......

.outer {
    width: 10px;
    margin: 0 auto;
    position: relative;
}
.inner {
    position: absolute;
    bottom: 0;
}

...“外部”的属性很好地将其置于其所包含的内容中，但“内部”的属性使其与“外部”div的左边缘对齐。

我尝试了一些带有负边距和左/右值的选项用于“内部”，但它们似乎依赖于固定的像素值，而我需要它的尺寸相对于其内容保持可变。

需要注意的是，“内部”div需要绝对定位，因为它必须固定到“外部”的底部边缘（因此“底部：0”），即使“外部”的高度是比内在短。

以下是一个正在运行的示例：http://jsfiddle.net/bVC3J/

对于如何在不使用JS的情况下实现这一点，任何人都有任何想法？如果没有CSS解决方案，我向JS开放，所以欢迎您作为最后的手段提出建议。感谢。

Answer 1

这可能适合您：http://jsfiddle.net/fF3A4/1/

.outer {
    width:300px;
    height:300px;
    display:table-cell;
    background:#333;
    vertical-align:bottom;
    text-align:center;
}
.inner {
    width:200px;
    margin:0 auto;
    background:#ccc;
    display:inline-block;
}

水平居中div在容器内具有可变尺寸

1 个答案: