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

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

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


当前回答

使用Flexbox可以轻松将内容居中。以下代码显示了容器的CSS,其中的内容需要居中:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

其他回答

实际上,垂直居中需要两个div。包含内容的div必须具有宽度和高度。

#集装箱{位置:绝对;顶部:50%;页边空白:-200像素;/*#内容高度的一半*/左:0;宽度:100%;}#内容{宽度:624px;左边距:自动;右边距:自动;高度:395px;边框:1px实心#000000;}<div id=“container”><div id=“content”><h1>居中的div</h1></div></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!

垂直和水平居中

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

享受

因为每次我需要垂直居中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>

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

相关:居中图像