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

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

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

如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置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>

2019-04-09 08:12:11

其他回答

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

对于那些不想跳的人：

将父容器指定为位置：相对或位置：绝对。指定子容器上的固定高度。在子容器上设置位置：绝对和顶部：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>

2011-07-22 05:55:13

将元素垂直居中的现代方法是使用flexbox。

你需要父母来决定身高，孩子来居中。

下面的示例将使div在浏览器中居中。重要的是（在我的示例中）将height:100%设置为body和html，然后将min-height:100%设置到容器。

正文，html{背景：#F5F5F5；框大小调整：边框框；高度：100%；边距：0；}#中心容器{对齐项目：居中；显示：柔性；最小高度：100%；}#中心{背景：白色；边距：0自动；填充：10px；文本对齐：居中；宽度：200px；}<div id='center_container'>我是中心</分区></div>

2014-10-20 13:37:54

.中心{位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；/*（x，y）=>位置*/-ms转换：转换（-50%，-50%）；/*即9*/-webkit转换：转换（-50%，-50%）；/*Chrome、Safari、Opera*/}.垂直{位置：绝对；顶部：50%；//左：0；变换：平移（0，-50%）；/*（x，y）=>位置*/}.水平{位置：绝对；//顶部：0；左：50%；变换：平移（-50%，0）；/*（x，y）=>位置*/}第二部分{填充：1em；背景色：灰色；颜色：白色；} <body><div class=“vertical”>垂直向左</div><div class=“horizontal”>水平顶部</div><div class=“center”>垂直水平</div></body>

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

推荐文章

最新文章

标签