Question

我意识到那里有很多例子，我正在从一个工作但似乎无法让它正常运行。

这是我目前所拥有的：

<div id="w">
    <div id="iw">
        <a href="#">
            <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" />
        </a>
    </div>
</div>

和

body {
    width:100%;
    margin:0;
    padding:0;
}
#w {
    display:table;
    width: 100%;
}
#iw {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
#iw a img {
    -moz-box-shadow:0 1em 1em #444;
    -webkit-box-shadow:0 1em 1em #444;
    -o-box-shadow:0 1em 1em #444;
    box-shadow:0 1em 1em #444;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius: 10px;
}

（http://jsfiddle.net/rlemon/zjWaz/）

基本上我想垂直和水平居中iw容器。

我读过的想法是包装容器为display: table;，内容为display: table-cell;，然后您可以使用表中的垂直对齐。太好了，现在如何让表格100％高度的页面？我能做的最好的是一个固定的高度，它（不使用JS）不会帮助我完全垂直居中。

Answer 1

请尝试使用以下CSS：

html,body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:1px solid #000;
}
#w {
    display:table;
    height:100%;
    width: 100%;
}
#iw {
    display:table-cell;
    text-align:center;
    height:100%;
    width:100%;
    vertical-align:middle;
}
#iw a img {
    -moz-box-shadow:0 1em 1em #444;
    -webkit-box-shadow:0 1em 1em #444;
    -o-box-shadow:0 1em 1em #444;
    box-shadow:0 1em 1em #444;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius: 10px;
}

在更新的小提琴中查看此内容：http://jsfiddle.net/zjWaz/1/

Answer 2

如果你知道宽度和高度更容易定位iw绝对，顶部：50％; left：50％并设置负边距半高和宽度（假设宽度/高度为200px那样margin: -100px 0 0 -100px）

Answer 3

检查此Css

body {
width:100%;
margin:0;
padding:0;
 }
#w {
display:table;
width: 100%;
}
#iw {
width:100%;
height:100%;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
#iw a img {
-moz-box-shadow:0 1em 1em #444;
-webkit-box-shadow:0 1em 1em #444;
-o-box-shadow:0 1em 1em #444;
box-shadow:0 1em 1em #444;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius: 10px;
}

同时检查更新的小提琴。 http://jsfiddle.net/zjWaz/4/

希望你得到答案。

Answer 4

你不需要任何js或类似的东西，只需将样式应用为表格： display：表格和表格行，100％。在这里查找更多信息： http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/

或者更好，您可以使用div固定

来完成

垂直居中的div

4 个答案: