我想用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?
当前回答
因为每次我需要垂直居中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>
其他回答
不回答浏览器兼容性,但也要提到新的网格和不那么新的Flexbox功能。
Grid
来自:Mozilla-网格文档-垂直对齐Div
浏览器支持:网格浏览器支持
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML格式:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
柔性包装箱
浏览器支持:Flexbox浏览器支持
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
我觉得这个最有用。。。它给出了最准确的“H”布局,并且非常容易理解。
这种标记的好处是您可以在一个地方定义内容大小->“PageContent”。
页面背景的颜色及其水平边距在其相应的div中定义。
<div id="PageLayoutConfiguration"
style="display: table;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
width: 100%; height: 100%;">
<div id="PageBackground"
style="display: table-cell; vertical-align: middle;
background-color: purple;">
<div id="PageHorizontalMargins"
style="width: 100%;
background-color: seashell;">
<div id="PageContent"
style="width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;">
My content goes here...
</div>
</div>
</div>
</div>
这里用CSS分隔:
<div id="PageLayoutConfiguration">
<div id="PageBackground">
<div id="PageHorizontalMargins">
<div id="PageContent">
my content goes here...
</div>
</div>
</div>
</div>
#PageLayoutConfiguration{
display: table;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#PageBackground{
display: table-cell;
vertical-align: middle;
background-color: purple;
}
#PageHorizontalMargins{
width: 100%;
background-color: seashell;
}
#PageContent{
width: 1200px;
height: 620px;
margin: 0 auto;
background-color: grey;
}
要使div在页面上居中,请选中fiddle链接。
#甚高频{边距:自动;位置:绝对;顶部:0;左:0;底部:0;右:0;}.box格式{边框半径:15px;方框阴影:0 0 8px rgba(0,0,0、0.4);填充:25px;宽度:100px;高度:100px;背景:白色;}<div id=“vh”class=“box”>div垂直对齐</div>
另一种选择是使用flex框,选中fiddle链接。
.vh文件{背景色:#ddd;高度:400px;对齐项目:居中;显示:柔性;}.vh>div{宽度:100%;文本对齐:居中;垂直对齐:中间;}<div class=“vh”><div>div垂直对齐</div></div>
另一种选择是使用CSS 3转换:
#甚高频{位置:绝对;顶部:50%;左:50%;/*变换:translateX(-50%)translateY(-50%)*/转换:转换(-50%,-50%);}.box格式{边框半径:15px;方框阴影:0 0 8px rgba(0,0,0、0.4);填充:25px;宽度:100px;高度:100px;背景:白色;}<div id=“vh”class=“box”>div垂直对齐</div>
我最近发现了一个技巧:你需要使用前50%,然后再进行translateY(-50%)。
.外部div{位置:相对;高度:150px;宽度:150px;背景色:红色;}.居中div{位置:绝对;顶部:50%;-webkit转换:translateY(-50%);-ms变换:translateY(-50%);变换:translateY(-50%);背景色:白色;}<div class='outer-div'><div class='entered-div'>测试文本</div></div>
Billbad的答案只适用于固定宽度的.intern除法。此解决方案通过将属性textalign:center添加到.outer div中来实现动态宽度。
.外部{位置:绝对;显示:表格;宽度:100%;高度:100%;文本对齐:居中;}.中间{显示:表格单元格;垂直对齐:中间;}.内部{文本对齐:居中;显示:内联块;宽度:自动;}<div class=“outer”><div class=“middle”><div class=“inner”>所容纳之物</div></div></div>