我想用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?
当前回答
.center{
display: grid;
place-items: center;
}
其他回答
这个解决方案适用于块元素(例如,<div>)。我用颜色使溶液更清晰。
HTML格式:
<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>
CSS:
main {
position: relative;
width: 400px;
height: 400px;
}
.skin_orange {
outline: thin dotted red;
background: orange;
}
.bigBox {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.skin_blue {
background-color: blue;
}
JSFiddle代码演示
我这样做了(相应地改变宽度、高度、顶部边距和左侧边距):
.wrapper {
width: 960px;
height: 590px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -295px;
margin-left: -480px;
}
<div class="wrapper"> -- Content -- </div>
要使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>
这在我的情况下有效(仅在现代浏览器中测试):
.textthatneedstobecentered {
margin: auto;
top: 0; bottom: 0;
}
垂直和水平居中
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 */}
享受