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

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

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

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

当前回答

要垂直对齐网页（包括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。包含内容的div必须具有宽度和高度。

#集装箱{位置：绝对；顶部：50%；页边空白：-200像素；/*#内容高度的一半*/左：0；宽度：100%；}#内容{宽度：624px；左边距：自动；右边距：自动；高度：395px；边框：1px实心#000000；}<div id=“container”><div id=“content”><h1>居中的div</h1></div></div>

这是结果。

2008-12-28 15:15:06

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

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

我用这个。它适用于Internet Explorer 8和更高版本：

高度：268px-用于显示：表的作用类似于最小高度。

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML格式：

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

2014-07-21 09:00:17

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

使用Flexbox可以轻松将内容居中。以下代码显示了容器的CSS，其中的内容需要居中：

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

2017-08-29 05:49:21

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

推荐文章

最新文章

标签