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

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

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

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

当前回答

通过使用transform属性，我们可以轻松地进行垂直居中的div。

.main分区{背景：无重复滚动0 0#999；字体大小：18px；高度：450px；最大宽度：850px；填充：15px；}.垂直中心{背景：无重复滚动0 0#1FA67A；颜色：#FFFFFF；填充：15px；位置：相对；顶部：50%；变换：translateY（-50%）；-moz变换：translateY（-50%）；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；-o变换：translateY（-50%）；}<div class=“main div”><div class=“垂直中心”><span>“Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incident ut labour et dolore magna aliqua。ut enim ad minim veniam，quis nostrud exerciation ullamco labours nisi ut aliquip ex a commo consequat。Duis aute irure dolor in representate velit esse cillum dolore eu fugiat nula pariator。例外情况下，在非政府组织的支持下，必须承担责任。”我正式任命了一位不称职的莫利特。“”</span></div></div>

请参阅此处了解全文

2015-02-10 09:59:38

其他回答

我觉得这个最有用。。。它给出了最准确的“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

特别是对于具有相对（未知）高度的父div，未知解决方案中的居中对我来说非常有用。

它在Chrome、Firefox、Opera和Internet Explorer中进行了测试。

/*此父项可以是任何宽度和高度*/.块{文本对齐：居中；}/*鬼魂被推着保持完美的居中*/.block：之前{内容：“”；显示：内联块；高度：100%；垂直对齐：中间；右边距：-0.25em；/*调整间距*/}/*要居中的元素可以也可以是任何宽度和高度*/.居中{显示：内联块；垂直对齐：中间；宽度：300px；}<div style=“width:400px；height:200px；”><div class=“block”style=“高度：90%；宽度：100%”><div class=“center”><h1>一些文本</h1><p>任何其他文本。。。“”</p></div></div></div>

2014-11-20 09:28:36

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

要使div在页面上居中，请选中fiddle链接。

#甚高频{边距：自动；位置：绝对；顶部：0；左：0；底部：0；右：0；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>

另一种选择是使用flex框，选中fiddle链接。

.vh文件{背景色：#ddd；高度：400px；对齐项目：居中；显示：柔性；}.vh>div{宽度：100%；文本对齐：居中；垂直对齐：中间；}<div class=“vh”><div>div垂直对齐</div></div>

另一种选择是使用CSS 3转换：

#甚高频{位置：绝对；顶部：50%；左：50%；/*变换：translateX（-50%）translateY（-50%）*/转换：转换（-50%，-50%）；}.box格式{边框半径：15px；方框阴影：0 0 8px rgba（0，0，0、0.4）；填充：25px；宽度：100px；高度：100px；背景：白色；}<div id=“vh”class=“box”>div垂直对齐</div>

2013-08-13 04:06:03

这里有一个简单的方法，几乎没有代码：

CSS代码：

.main{
    height: 100%;
}

.center{
    top: 50%;
    margin-top: 50%;
}

HTML代码：

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

您的文本将位于页面中间！

2015-03-26 01:25:59

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

推荐文章

最新文章

标签