我想用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!
其他回答
名单上还有一个我看不到的:
.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中的绝对水平和垂直居中
我分享了一个简短的版本。
.first分区{显示:表格;位置:绝对;顶部:0;左:0;高度:100%;宽度:100%;}.firstDivision垂直中心{文本对齐:居中;显示:表格单元格;垂直对齐:中间;}<div class=“firstDivision”><div class=“verticalCenter”>垂直文本居中。</div></div>
要垂直对齐网页(包括Internet Explorer 6)中的框,可以使用:
有条件的评论haslayout属性显示:其他表值(现在为flex)
不停摆弄
/*Internet Explorer 8和其他*/.主要{宽度:500px;边距:自动;边框:实心;}html格式{高度:100%;宽度:100%;显示:表格;}正文{显示:表格单元格;垂直对齐:中间;}<!-- [如果lte IE 7]><style>/*应该在<head>中*/html,正文,.ie{高度:100%;文本对齐:居中;空白:nowrap;}例如,.main{显示:内联;/*在使用块元素而不是内联元素时与缩放一起使用*/缩放:1;垂直对齐:中间;文本对齐:左侧;空白:正常;}</style><b class=“ie”></b><!--[endif]--><div class=“main”><p>用你的内容填满它</p><p><a href=“https://jsfiddle.net/h8z24s5v/embedded/result/“>JsFiddle版本</a></p></div>
实际上,InternetExplorer7在这里会带来一些麻烦,因为它是唯一严格应用高度的浏览器:100%应用于HTML/body元素。
但是,这是过去和现在的事了,谁还记得旧版本的Internet Explorer,表/表单元格很好,display:flex很有前途,display:grid总有一天会出现。
现在通过flex的另一个示例
html格式{显示:柔性;最小高度:100vh;/*或高度*/}正文{边距:自动;}<div>div垂直对齐</div>
.中心{位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);/*(x,y)=>位置*/-ms转换:转换(-50%,-50%);/*即9*/-webkit转换:转换(-50%,-50%);/*Chrome、Safari、Opera*/}.垂直{位置:绝对;顶部:50%;//左:0;变换:平移(0,-50%);/*(x,y)=>位置*/}.水平{位置:绝对;//顶部:0;左:50%;变换:平移(-50%,0);/*(x,y)=>位置*/}第二部分{填充:1em;背景色:灰色;颜色:白色;} <body><div class=“vertical”>垂直向左</div><div class=“horizontal”>水平顶部</div><div class=“center”>垂直水平</div></body>
相关:居中图像
特别是对于具有相对(未知)高度的父div,未知解决方案中的居中对我来说非常有用。
它在Chrome、Firefox、Opera和Internet Explorer中进行了测试。
/*此父项可以是任何宽度和高度*/.块{文本对齐:居中;}/*鬼魂被推着保持完美的居中*/.block:之前{内容:“”;显示:内联块;高度:100%;垂直对齐:中间;右边距:-0.25em;/*调整间距*/}/*要居中的元素可以也可以是任何宽度和高度*/.居中{显示:内联块;垂直对齐:中间;宽度:300px;}<div style=“width:400px;height:200px;”><div class=“block”style=“高度:90%;宽度:100%”><div class=“center”><h1>一些文本</h1><p>任何其他文本。。。“”</p></div></div></div>