如何垂直和水平居中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