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

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

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


当前回答

我认为,对于所有不使用Flexbox的浏览器来说,“alignitems:center;”是一种显示:表格和垂直对齐:中间;的组合;。

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* Optional */
    height: 100%; /* Optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

演示:https://jsfiddle.net/6m640rpp/

其他回答

垂直和水平居中

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

享受

仅垂直居中

如果您不关心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!

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

相关:居中图像

这是迄今为止最简单的方法,也适用于非阻塞元素。唯一的缺点是它是Flexbox,因此,较旧的浏览器将不支持此功能。

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

指向CodePen的链接:

http://codepen.io/damianocel/pen/LNOdRp

这里重要的一点是,对于垂直居中,我们需要定义父元素(容器),并且img的高度必须小于父元素。

名单上还有一个我看不到的:

.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中的绝对水平和垂直居中