我想用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?
当前回答
我最近发现了一个技巧:你需要使用前50%,然后再进行translateY(-50%)。
.外部div{位置:相对;高度:150px;宽度:150px;背景色:红色;}.居中div{位置:绝对;顶部:50%;-webkit转换:translateY(-50%);-ms变换:translateY(-50%);变换:translateY(-50%);背景色:白色;}<div class='outer-div'><div class='entered-div'>测试文本</div></div>
其他回答
此方法不使用任何变换。因此,输出变得模糊没有问题。
position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;
通过使用transform属性,我们可以轻松地进行垂直居中的div。
.main分区{背景:无重复滚动0 0#999;字体大小:18px;高度:450px;最大宽度:850px;填充:15px;}.垂直中心{背景:无重复滚动0 0#1FA67A;颜色:#FFFFFF;填充:15px;位置:相对;顶部:50%;变换:translateY(-50%);-moz变换:translateY(-50%);-webkit转换:translateY(-50%);-ms变换:translateY(-50%);-o变换:translateY(-50%);}<div class=“main div”><div class=“垂直中心”><span>“Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incident ut labour et dolore magna aliqua。ut enim ad minim veniam,quis nostrud exerciation ullamco labours nisi ut aliquip ex a commo consequat。Duis aute irure dolor in representate velit esse cillum dolore eu fugiat nula pariator。例外情况下,在非政府组织的支持下,必须承担责任。”我正式任命了一位不称职的莫利特。“”</span></div></div>
请参阅此处了解全文
使用转换的三行代码实际上在现代浏览器和Internet Explorer上运行:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
我添加这个答案是因为我发现这个答案的前一个版本有些不完整(堆栈溢出不允许我简单地评论)。
如果当前div位于主体中且没有容器div,则“position”relative会破坏样式。然而,“fixed”似乎有效,但它显然会修复视口中心的内容此外,我使用这种样式对一些覆盖div进行了居中设置,并发现在Mozilla中,这个转换后的div中的所有元素都失去了底部边框。可能是渲染问题。但是,只在其中一些页面上添加最小的填充就可以正确地渲染。Chrome和Internet Explorer(令人惊讶)渲染了这些框,而不需要填充
实现这一点有多种方法。
使用CSS的flex属性。
解决方案#1.父级{宽度:400px;高度:200px;背景:蓝色;显示:柔性;对齐项目:居中;对齐内容:中心;}.儿童{宽度:75px;高度:75px;背景:黄色;}<div class=“parent”><div class=“child”></div></div>
或使用display:flex;边距:自动;
解决方案#2.父级{宽度:400px;高度:200px;背景:蓝色;显示:柔性;}.儿童{宽度:75px;高度:75px;背景:黄色;边距:自动;}<div class=“parent”><div class=“child”></div></div>
显示文本中心
解决方案#3.父级{宽度:400px;高度:200px;背景:黄色;显示:柔性;对齐项目:居中;对齐内容:中心;}<div class=“parent”>中心</div>
使用百分比(%)高度和宽度。
解决方案#4.父级{位置:绝对;高度:100%;宽度:100%;背景:蓝色;显示:柔性;对齐项目:居中;对齐内容:中心;}.儿童{宽度:75px;高度:75px;背景:黄色;}<div class=“parent”><div class=“child”></div></div>
不回答浏览器兼容性,但也要提到新的网格和不那么新的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;