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

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

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


当前回答

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

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

其他回答

当我不得不回到这个问题上时,这总是我要去的地方。

对于那些不想跳的人:

将父容器指定为位置:相对或位置:绝对。指定子容器上的固定高度。在子容器上设置位置:绝对和顶部:50%,以将顶部向下移动到父容器的中间。设置页边距上限:-yy,其中yy是子容器高度的一半,以向上偏移项目。

代码中的示例:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </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>

我分享了一个简短的版本。

.first分区{显示:表格;位置:绝对;顶部:0;左:0;高度:100%;宽度:100%;}.firstDivision垂直中心{文本对齐:居中;显示:表格单元格;垂直对齐:中间;}<div class=“firstDivision”><div class=“verticalCenter”>垂直文本居中。</div></div>

要垂直对齐网页(包括Internet Explorer 6)中的框,可以使用:

有条件的评论haslayout属性显示:其他表值(现在为flex)

不停摆弄

/*Internet Explorer 8和其他*/.主要{宽度:500px;边距:自动;边框:实心;}html格式{高度:100%;宽度:100%;显示:表格;}正文{显示:表格单元格;垂直对齐:中间;}<!-- [如果lte IE 7]><style>/*应该在<head>中*/html,正文,.ie{高度:100%;文本对齐:居中;空白:nowrap;}例如,.main{显示:内联;/*在使用块元素而不是内联元素时与缩放一起使用*/缩放:1;垂直对齐:中间;文本对齐:左侧;空白:正常;}</style><b class=“ie”></b><!--[endif]--><div class=“main”><p>用你的内容填满它</p><p><a href=“https://jsfiddle.net/h8z24s5v/embedded/result/“>JsFiddle版本</a></p></div>

实际上,InternetExplorer7在这里会带来一些麻烦,因为它是唯一严格应用高度的浏览器:100%应用于HTML/body元素。


但是,这是过去和现在的事了,谁还记得旧版本的Internet Explorer,表/表单元格很好,display:flex很有前途,display:grid总有一天会出现。


现在通过flex的另一个示例

html格式{显示:柔性;最小高度:100vh;/*或高度*/}正文{边距:自动;}<div>div垂直对齐</div>

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

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

这是结果。