我想用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?
当前回答
我这样做了(相应地改变宽度、高度、顶部边距和左侧边距):
.wrapper {
width: 960px;
height: 590px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -295px;
margin-left: -480px;
}
<div class="wrapper"> -- Content -- </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(令人惊讶)渲染了这些框,而不需要填充
当我不得不回到这个问题上时,这总是我要去的地方。
对于那些不想跳的人:
将父容器指定为位置:相对或位置:绝对。指定子容器上的固定高度。在子容器上设置位置:绝对和顶部:50%,以将顶部向下移动到父容器的中间。设置页边距上限:-yy,其中yy是子容器高度的一半,以向上偏移项目。
代码中的示例:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</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>
您的文本将位于页面中间!
因为每次我需要垂直居中div时,我都会一遍又一遍地搜索它,这个答案总是首先出现的,所以我会把这个留给未来的我(因为提供的解决方案都不能很好地满足我的需求):
因此,如果已经在使用引导程序,可以按如下方式进行:
<div style="min-height: 100vh;" class="align-items-center row">
<div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well
//content goes here
</div>
</div>
不幸的是,但并不令人惊讶的是,解决方案比人们希望的更复杂。同样不幸的是你需要在垂直居中的div周围使用额外的div。
对于符合标准的浏览器,如Mozilla、Opera、Safari等,您需要将外部div设置为显示为表,将内部div设置为表单元格-然后可以垂直居中。对于InternetExplorer,您需要将内部div绝对放置在外部div中,然后将顶部指定为50%。以下页面很好地解释了这一技术,并提供了一些代码示例:
CSS中的垂直居中未知高度的CSS垂直居中(兼容Internet Explorer 7)(Wayback Machine提供的存档文章)
还有一种使用JavaScript进行垂直居中的技术。内容与JavaScript和CSS的垂直对齐演示了这一点。