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

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

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

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

当前回答

Billbad的答案只适用于固定宽度的.intern除法。此解决方案通过将属性textalign:center添加到.outer div中来实现动态宽度。

.外部{位置：绝对；显示：表格；宽度：100%；高度：100%；文本对齐：居中；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{文本对齐：居中；显示：内联块；宽度：自动；}<div class=“outer”><div class=“middle”><div class=“inner”>所容纳之物</div></div></div>

2014-07-04 09:03:27

其他回答

实现这一点有多种方法。

使用CSS的flex属性。

解决方案#1.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>

或使用display：flex；边距：自动；

解决方案#2.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；}.儿童{宽度：75px；高度：75px；背景：黄色；边距：自动；}<div class=“parent”><div class=“child”></div></div>

显示文本中心

解决方案#3.父级{宽度：400px；高度：200px；背景：黄色；显示：柔性；对齐项目：居中；对齐内容：中心；}<div class=“parent”>中心</div>

使用百分比（%）高度和宽度。

解决方案#4.父级{位置：绝对；高度：100%；宽度：100%；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>

2019-06-28 10:11:51

最简单的方法是以下三行CSS：

1）位置：相对；

2）顶部：50%；

3）变换：translateY（-50%）；

以下是一个示例：

外部配电盘{高度：170px；宽度：300px；背景色：浅灰色；}中间分隔符{位置：相对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；}<div class='outer-div'><div class='middle-div'>测试文本</div></div>

2014-12-17 18:30:23

我最近发现了一个技巧：你需要使用前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>

2019-04-09 08:12:11

我认为，对于所有不使用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/

2018-01-23 11:57:07

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

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

推荐文章

最新文章

标签