Question

我的背景图片的行为是，当我调整浏览器窗口大小时，图像始终完全居中。它在顶部，左侧，右侧和底部与浏览器窗口的边缘相同的“距离”。

CSS：

background-image: url("ipad.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 563.5px 800px;

我有一个div覆盖这个图像，我希望它的行为方式与背景图像相同，因此它始终位于同一位置的背景图像上方。

这甚至可能吗？如果是的话。怎么样？我希望你明白我想要实现的目标。 :) 非常感谢您的帮助。：d

Answer 1

无论浏览器窗口的大小如何，您似乎都在尝试水平和垂直居中。如果是这样，尝试这样的事情：

您的HTML：

<div class="outer">
    <div class="middle">
        <div class="inner">
            The content that you want centered.
        </div>
    </div>
</div>

你的CSS：

/* Vertical and horizontal centering */
.outer {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
}
.middle { 
    height:100%; 
    display:table; 
    margin:0 auto;
}
.inner { 
    vertical-align:middle; 
    display:table-cell;
}

祝你好运！

修改：以上是上述示例 - http://jsbin.com/aguciw

如何垂直和水平居中DIV？

1 个答案: