我想用CSS垂直居中放置一个div。我不需要表或JavaScript,只需要纯CSS。我找到了一些解决方案,但都缺少Internet Explorer 6支持。

<body>
    <div>Div to be aligned vertically</div>
</body>

如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中放置div?


当前回答

垂直和水平居中

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 */}

享受

其他回答

现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:

.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>div垂直对齐</div></div>

这个解决方案适用于块元素(例如,<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代码演示

这在我的情况下有效(仅在现代浏览器中测试):

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

.中心{位置:绝对;顶部: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>

相关:居中图像

下面是我可以构建的最好的全方位解决方案,以垂直和水平居中固定宽度、灵活高度的内容框。它已在Firefox、Opera、Chrome和Safari的最新版本中测试并运行。

.外部{显示:表格;位置:绝对;顶部:0;左:0;高度:100%;宽度:100%;}.中间{显示:表格单元格;垂直对齐:中间;}.内部{左边距:自动;右边距:自动;宽度:400px;/*你想要什么宽度*/}<div class=“outer”><div class=“middle”><div class=“inner”><h1>内容</h1><p>从前,一个沉闷的午夜</p></div></div></div>

查看动态内容的工作示例

我内置了一些动态内容来测试它的灵活性,并希望知道是否有人发现它有任何问题。它也可以很好地用于居中的覆盖——灯箱、弹出窗口等。