我想用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 Flexbox align items属性来实现这一点。
html,正文{高度:100%;}正文{显示:柔性;对齐项目:居中;}<div>垂直居中</div>
其他回答
现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:
.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>div垂直对齐</div></div>
名单上还有一个我看不到的:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
跨浏览器(包括Internet Explorer 8-Internet Explorer 10,无黑客攻击!)响应百分比和最小值/最大值-居中,不考虑填充(不考虑框大小!)必须声明高度(请参见可变高度)建议设置溢出:自动防止内容溢出(请参阅溢出)
来源:CSS中的绝对水平和垂直居中
CSS网格
正文,html{margin:0;}正文{显示:栅格;最小高度:100vh;对齐项目:居中;}<div>div垂直对齐</div>
.center{
display: grid;
place-items: center;
}
我分享了一个简短的版本。
.first分区{显示:表格;位置:绝对;顶部:0;左:0;高度:100%;宽度:100%;}.firstDivision垂直中心{文本对齐:居中;显示:表格单元格;垂直对齐:中间;}<div class=“firstDivision”><div class=“verticalCenter”>垂直文本居中。</div></div>