如何在所有使用CSS的浏览器中垂直居中放置div元素？

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

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

如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div？

当前回答

特别是对于具有相对（未知）高度的父div，未知解决方案中的居中对我来说非常有用。

它在Chrome、Firefox、Opera和Internet Explorer中进行了测试。

/*此父项可以是任何宽度和高度*/.块{文本对齐：居中；}/*鬼魂被推着保持完美的居中*/.block：之前{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；右边距：-0.25em；/*调整间距*/}/*要居中的元素可以也可以是任何宽度和高度*/.居中{显示：内联块；垂直对齐：中间；宽度：300px；}<div style=“width:400px；height:200px；”><div class=“block”style=“高度：90%；宽度：100%”><div class=“center”><h1>一些文本</h1><p>任何其他文本。。。“”</p></div></div></div>

2014-11-20 09:28:36

其他回答

以下是我的案例，并在Firefox中进行了测试。

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

div的高度和父对象的高度是动态的。当同一父元素上有高于目标元素的其他元素时，我会使用它，因为这两个元素都位于水平内联位置。

2015-12-23 17:09:11

经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

2015-05-19 12:04:16

要垂直对齐网页（包括Internet Explorer 6）中的框，可以使用：

有条件的评论haslayout属性显示：其他表值（现在为flex）

不停摆弄

/*Internet Explorer 8和其他*/.主要{宽度：500px；边距：自动；边框：实心；}html格式{高度：100%；宽度：100%；显示：表格；}正文{显示：表格单元格；垂直对齐：中间；}<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>

2015-03-13 19:42:58

下面是我可以构建的最好的全方位解决方案，以垂直和水平居中固定宽度、灵活高度的内容框。它已在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>

查看动态内容的工作示例

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

2011-05-31 03:13:13

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

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

2013-08-13 03:08:30

如何在所有使用CSS的浏览器中垂直居中放置div元素？

推荐文章

最新文章

标签