css - 如何使 DIV 垂直和水平居中？

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