我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?
当前回答
如果有人只关心Internet Explorer 10(及更高版本),请使用Flexbox:
.父级{宽度:500px;高度:500px;背景:黄色;显示:-webkit flex;显示:-ms flexbox;显示:柔性;-webkit调整内容:中心;-ms柔性包装:中心;对齐内容:中心;-webkit对齐项目:中心;-ms flex align:中心;对齐项目:居中;}.居中{宽度:100px;高度:100px;背景:蓝色;}<div class=“parent”><div class=“center”></div></div>
Flexbox支架:http://caniuse.com/flexbox
其他回答
不回答浏览器兼容性,但也要提到新的网格和不那么新的Flexbox功能。
Grid
来自:Mozilla-网格文档-垂直对齐Div
浏览器支持:网格浏览器支持
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML格式:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
柔性包装箱
浏览器支持:Flexbox浏览器支持
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
这在我的情况下有效(仅在现代浏览器中测试):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
只需这样做:在div中添加类:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
请阅读本文以获得解释。注:高度是必需的。
如果有人只关心Internet Explorer 10(及更高版本),请使用Flexbox:
.父级{宽度:500px;高度:500px;背景:黄色;显示:-webkit flex;显示:-ms flexbox;显示:柔性;-webkit调整内容:中心;-ms柔性包装:中心;对齐内容:中心;-webkit对齐项目:中心;-ms flex align:中心;对齐项目:居中;}.居中{宽度:100px;高度:100px;背景:蓝色;}<div class=“parent”><div class=“center”></div></div>
Flexbox支架:http://caniuse.com/flexbox
经过大量研究,我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}