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

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

2013-08-13 03:08:30

其他回答

.center{
    display: grid;
    place-items: center;
}

2021-04-01 22:31:11

我刚刚写了这篇CSS，想了解更多信息，请浏览：这篇文章用3行CSS垂直对齐任何内容。

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

2016-09-27 05:53:55

最简单的方法是以下三行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

对于新手，请尝试：

display: flex;
align-items: center;
justify-content: center;

2019-06-20 06:25:09

垂直和水平居中

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

享受

2015-02-07 11:45:02

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

推荐文章

最新文章

标签