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

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

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

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

当前回答

最好的做法是：

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150像素，因为在本例中，这是div高度的一半。

2015-08-26 03:17:28

其他回答

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

垂直和水平居中

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

我觉得这个最有用。。。它给出了最准确的“H”布局，并且非常容易理解。

这种标记的好处是您可以在一个地方定义内容大小->“PageContent”。

页面背景的颜色及其水平边距在其相应的div中定义。

<div id="PageLayoutConfiguration"
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

    <div id="PageBackground"
         style="display: table-cell; vertical-align: middle;
         background-color: purple;">

        <div id="PageHorizontalMargins"
             style="width: 100%;
             background-color: seashell;">

            <div id="PageContent"
                 style="width: 1200px; height: 620px; margin: 0 auto;
                 background-color: grey;">

                 My content goes here...

            </div>
        </div>
    </div>
</div>

这里用CSS分隔：

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
}

#PageBackground{
   display: table-cell;
   vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px;
   height: 620px;
   margin: 0 auto;
   background-color: grey;
}

2013-08-11 18:35:13

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

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

2016-09-06 15:48:35

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

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

2016-09-27 05:53:55

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

推荐文章

最新文章

标签