如何在元素垂直对齐的情况下制作跨浏览器解决方案?
http://jsfiddle.net/e2yuqtdt/3/
这适用于Firefox和Chrome,但不适用于IE11
<div class="page_login">
<div>vertical-align:center; text-align:center</div>
</div>
html, body {
height:100%;
}
.page_login {
display:flex;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
}
当居中元素高于视口高度时,背景仅为100%而不是100%滚动高度
http://jsfiddle.net/e2yuqtdt/8/
html, body {
min-height:100%;
height:100%;
}
.page_login {
display:flex;
min-height:100%;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
答案 0 :(得分:5)
如何在元素垂直的情况下制作跨浏览器解决方案 对准?
看看这个小提琴:http://jsfiddle.net/5ry8vqkL/
应用的技术是使用&#34; display:table&#34;。这篇文章深入介绍了方法http://css-tricks.com/centering-in-the-unknown/
此处可以看到支持的浏览器:http://caniuse.com/#search=table-cell
HTML:
<div class="container">
<div id="page-login">
<div class="panel">Some content</div>
</div>
</div>
CSS:
html, body {
min-height:100%;
height:100%;
}
.container {
display: table;
height:100%;
width:100%;
background:#303030;
}
#page-login {
display: table-cell;
vertical-align: middle
}
.panel {
height: 100px;
background-color: #fff;
}
答案 1 :(得分:2)
您需要为div添加高度。由于您只指定了最小高度,IE会自动将其扩展到最大可能值。所以添加一个高度,如下所示:
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
height:200px;
}
http://jsfiddle.net/e2yuqtdt/6/
由于这是一个柔性盒,因此需要弯曲,一个好主意可能是使高度为百分比。所以div高度 - 例如 - 页面高度的50%,除非页面高度小于200px - 那么它将是100px高。
更新:不幸的是,不能让div只用CSS填充整个页面。但是,似乎可以使用Javascript,请参阅此处Make a div fill the height of the remaining screen space
实际上 - 已经使用 tables divs
http://jsfiddle.net/e2yuqtdt/14/
<div>
<div id="div1">
<div id="div2">vertical-align:center; text-align:center</div>
</div>
</div>
#div1 {
display:flex;
height:100%;
width:100%;
background:#303030;
}
#div2 {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
我知道这个更新是在elad.chen之后发布的 - 但是已经完成了这个并将其发布在下面的评论中 - 只是没有更新问题。