我想用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?
当前回答
只需这样做:在div中添加类:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
请阅读本文以获得解释。注:高度是必需的。
其他回答
我只是找到了另一种对我有用的方法:
<div class="container">
<div class="vertical">
<h1>Welcome</h1>
<h2>Aligned Vertically</h2>
<a href="#">Click ME</a>
</div>
</div>
CSS
.vertical{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
更多信息
经过大量研究,我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:
.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>div垂直对齐</div></div>
通过使用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>
请参阅此处了解全文
实现这一点有多种方法。
使用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>