我想用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?
当前回答
对于新手,请尝试:
display: flex;
align-items: center;
justify-content: center;
其他回答
名单上还有一个我看不到的:
.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中的绝对水平和垂直居中
使用Flexbox可以轻松将内容居中。以下代码显示了容器的CSS,其中的内容需要居中:
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
仅垂直居中
如果您不关心InternetExplorer6和7,可以使用包含两个容器的技术。
外部容器:
应具有显示:table;
内部容器:
应具有显示:表格单元格;应垂直对齐:中间;
内容框:
应该有显示:inline块;
您可以将任何内容添加到内容框中,而不必考虑其宽度或高度!
演示:
正文{边距:0;}.外部容器{位置:绝对;显示:表格;宽度:100%;/*这可以是任意宽度*/高度:100%;/*这可能是任何高度*/背景:#ccc;}.内部容器{显示:表格单元格;垂直对齐:中间;}.居中内容{显示:内联块;背景:#fff;填充:20px;边框:1px实心#000;}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>
另请参见此Fiddle!
水平和垂直居中
如果要水平和垂直居中,还需要以下内容。
内部容器:
文本应对齐:居中;
内容框:
应重新调整水平文本对齐方式,例如文本对齐方式:左对齐;或文本对齐:右;,除非您希望文本居中
演示:
正文{边距:0;}.外部容器{位置:绝对;显示:表格;宽度:100%;/*这可以是任意宽度*/高度:100%;/*这可能是任何高度*/背景:#ccc;}.内部容器{显示:表格单元格;垂直对齐:中间;文本对齐:居中;}.居中内容{显示:内联块;文本对齐:左侧;背景:#fff;填充:20px;边框:1px实心#000;}<div class=“outer container”><div class=“内部容器”><div class=“居中内容”>马尔科姆在中间</div></div></div>
另请参见此Fiddle!
如果有人只关心Internet Explorer 10(及更高版本),请使用Flexbox:
.父级{宽度:500px;高度:500px;背景:黄色;显示:-webkit flex;显示:-ms flexbox;显示:柔性;-webkit调整内容:中心;-ms柔性包装:中心;对齐内容:中心;-webkit对齐项目:中心;-ms flex align:中心;对齐项目:居中;}.居中{宽度:100px;高度:100px;背景:蓝色;}<div class=“parent”><div class=“center”></div></div>
Flexbox支架:http://caniuse.com/flexbox
现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:
.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>div垂直对齐</div></div>