css - 如何在浏览器窗口的边界（垂直和水平）中保持居中的 div？

Question

我正在努力使图像和链接始终保留在浏览器窗口中。这是网站。在 iPad 上加载时，居中的内容比窗口大，如图所示。

我希望它显示为（显然没有黑色边框）。这可能吗？

Answer 1

在没有任何额外标记的情况下使元素居中的技巧是使用translate：

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

这是小提琴：http: //jsfiddle.net/QE8KV/

---

PS不要忘记供应商前缀。

Answer 2

Joseph Silber 的答案的问题是，如果窗口小于您的内容，则内容会被剪切。

然后你可以使用浮动技巧：http: //jsfiddle.net/QE8KV/2/

HTML：

<div id="top"></div>
<div id="center">Text</div>

CSS：

html,body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#top {
    float: left;
    height: 50%;
    margin-top: -150px;
    width: 100%;
}
#center{
    background: #2D285E;
    box-shadow: 1px 1px 4px #231E5C;
    color:white;

    width: 300px;
    height: 300px;
    margin:0 auto;
    clear:both;
}