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

要垂直对齐网页（包括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

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

.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

这在我的情况下有效（仅在现代浏览器中测试）：

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

2016-09-06 15:48:35

声明此Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

.element{
    @include vertical-align();
}

2015-10-27 17:01:16

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

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

这是结果。

2008-12-28 15:15:06

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

推荐文章

最新文章

标签