我想用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?
当前回答
仅垂直居中
如果您不关心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!
其他回答
Billbad的答案只适用于固定宽度的.intern除法。此解决方案通过将属性textalign:center添加到.outer div中来实现动态宽度。
.外部{位置:绝对;显示:表格;宽度:100%;高度:100%;文本对齐:居中;}.中间{显示:表格单元格;垂直对齐:中间;}.内部{文本对齐:居中;显示:内联块;宽度:自动;}<div class=“outer”><div class=“middle”><div class=“inner”>所容纳之物</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中的绝对水平和垂直居中
将元素垂直居中的现代方法是使用flexbox。
你需要父母来决定身高,孩子来居中。
下面的示例将使div在浏览器中居中。重要的是(在我的示例中)将height:100%设置为body和html,然后将min-height:100%设置到容器。
正文,html{背景:#F5F5F5;框大小调整:边框框;高度:100%;边距:0;}#中心容器{对齐项目:居中;显示:柔性;最小高度:100%;}#中心{背景:白色;边距:0自动;填充:10px;文本对齐:居中;宽度:200px;}<div id='center_container'>我是中心</分区></div>
我刚刚写了这篇CSS,想了解更多信息,请浏览:这篇文章用3行CSS垂直对齐任何内容。
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
垂直和水平居中
HTML
<div id="dialog">Centered Dialog</div>
CSS
#dialog {
position:fixed; top:50%; left:50%; z-index:99991;
width:300px; height:60px;
margin-top:-150px; /* half of the width */
margin-left:-30px; /* half of the height */}
享受