html - 在较小的 div 内水平对齐 div

Question

我有一个 div，我需要将其显示在另一个 div 下，但随着页面大小的变化将其水平对齐。更改页面大小会更改第一个 div 的大小。

我想将 .div2 放在 .div1 下并居中对齐。

我创建了 a fiddle更清楚地展示我在寻找什么。

HTML

<div class="container">
    <img src="http://jamesonstarship.files.wordpress.com/2013/10/beautiful-cat-cats-16096437-1280-800.jpg" />
    <div class="floating-container">
        <div class="floating" style="left:36%;top:26%;width:6%;height:9.5%;">
            <div class="div1">
            </div>
            <div class="div2">
                There is some content here
            </div>
        </div>
        <div class="floating" style="left:55%;top:38%;width:5%;height:8%;">
            <div class="div1">
            </div>
            <div class="div2">
                There is some content here
            </div>
        </div>
    </div>
</div>

CSS

.container {
    width:100%;
    display: inline-block;
    position: relative;
}

.container img {
    width:100%;
}

.floating {
    position:absolute;
}

.div1 {
    border: 3px solid #FFF;
    border-radius: 3px;
    width: 100%;
    height: 100%;
}
.div2 {
    background: rgba(255,255,255,0.4);
    width: 75px;
}

几个小时以来一直在努力解决这个问题，非常感谢您的帮助!

Answer 1

作为纯 CSS 解决方案，您可以使用 % width 的值的 <div>元素，并设置负值 margin-left对于第二个 div，如下所示:

.div1 {
    width: 100%;
}

.div2 {
    width: 300%;
    margin-left: -100%; /* <-- (300% - 100%) / 2
                                 |      |
       width of the current div --      -- width of the first div */
}

此外，您需要使用 box-sizing: border-box; 第一个 div 计算元素的宽度/高度，包括白色边框:

.div1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这是 WORKING DEMO .

固定宽度的div

有两个选项来保留第二个 div (我为演示创建了一个名为 .div3 的新类)，它有一个固定的 width在中心。

1) 使用 CSS3 calc() 函数来计算左边距的正确值。

.div3 {
    width: 150px;
    margin-left: calc((100% - 150px) / 2); /* <-- -1 * (150px - 100%) / 2 */
}

UPDATED DEMO .

2) 使用 CSS3 translateX() 具有负百分比值 -50% 的变换函数而元素由 left: 50%; 定位

.div3 {
    width: 150px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

UPDATED DEMO .