我想用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?
当前回答
这里有一个简单的方法,几乎没有代码:
CSS代码:
.main{
height: 100%;
}
.center{
top: 50%;
margin-top: 50%;
}
HTML代码:
<div class="main">
<div class="center">
Hi, I am centered!
</div>
</div>
您的文本将位于页面中间!
其他回答
这里有一个简单的方法,几乎没有代码:
CSS代码:
.main{
height: 100%;
}
.center{
top: 50%;
margin-top: 50%;
}
HTML代码:
<div class="main">
<div class="center">
Hi, I am centered!
</div>
</div>
您的文本将位于页面中间!
现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:
.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>div垂直对齐</div></div>
可以通过两种方式实现
body{
left: 50%;
top:50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
OR
使用flex
body {
height:100%
width:100%
display: flex;
justify-content: center;
align-items: center;
}
对齐项目:居中;使内容垂直居中
对齐内容:中心;使内容水平居中
这在我的情况下有效(仅在现代浏览器中测试):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
不幸的是,但并不令人惊讶的是,解决方案比人们希望的更复杂。同样不幸的是你需要在垂直居中的div周围使用额外的div。
对于符合标准的浏览器,如Mozilla、Opera、Safari等,您需要将外部div设置为显示为表,将内部div设置为表单元格-然后可以垂直居中。对于InternetExplorer,您需要将内部div绝对放置在外部div中,然后将顶部指定为50%。以下页面很好地解释了这一技术,并提供了一些代码示例:
CSS中的垂直居中未知高度的CSS垂直居中(兼容Internet Explorer 7)(Wayback Machine提供的存档文章)
还有一种使用JavaScript进行垂直居中的技术。内容与JavaScript和CSS的垂直对齐演示了这一点。