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

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

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

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

当前回答

我用这个。它适用于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

其他回答

下面是我可以构建的最好的全方位解决方案，以垂直和水平居中固定宽度、灵活高度的内容框。它已在Firefox、Opera、Chrome和Safari的最新版本中测试并运行。

.外部{显示：表格；位置：绝对；顶部：0；左：0；高度：100%；宽度：100%；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{左边距：自动；右边距：自动；宽度：400px；/*你想要什么宽度*/}<div class=“outer”><div class=“middle”><div class=“inner”><h1>内容</h1><p>从前，一个沉闷的午夜</p＞</div></div></div>

查看动态内容的工作示例

我内置了一些动态内容来测试它的灵活性，并希望知道是否有人发现它有任何问题。它也可以很好地用于居中的覆盖——灯箱、弹出窗口等。

2011-05-31 03:13:13

这是迄今为止最简单的方法，也适用于非阻塞元素。唯一的缺点是它是Flexbox，因此，较旧的浏览器将不支持此功能。

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

指向CodePen的链接：

http://codepen.io/damianocel/pen/LNOdRp

这里重要的一点是，对于垂直居中，我们需要定义父元素（容器），并且img的高度必须小于父元素。

2016-04-05 17:36:54

将元素垂直居中的现代方法是使用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

经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。查看源

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

2015-05-19 12:04:16

使用CSS Flexbox align items属性来实现这一点。

html，正文{高度：100%；}正文{显示：柔性；对齐项目：居中；}<div>垂直居中</div>

2016-03-30 01:30:13

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

推荐文章

最新文章

标签