Question

直到最近，我一直在使用Flexbox垂直对齐这样的元素：

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

但是我已经开始研究越来越多需要支持不支持Flexbox的旧浏览器的项目，例如Internet Explorer 8.我想开始支持更广泛的浏览器和设备。

我的问题是;什么是一些最受支持的垂直对齐方法，只使用HTML和CSS？

在大多数情况下，我居中的元素没有固定的高度或宽度，通常宽度将是百分比值，高度将由动态内容决定。

提前致谢。

Answer 1

如果您不知道要与中间对齐的框的确切大小，那么我通常会使用display:table-* css设置。

将内容框放入带有display的div：table-cell包含在display：table元素中。该解决方案的浏览器兼容性非常好。

<强> HTML

<div class="popup">
  <div class="popup-table">
    <div class="popup-table-cell">
      <div class="popup-body">Hello there!</div>
    </div>
  </div>
</div>

<强>的CSS

.popup{position:fixed;top:0;left:0;bottom:0;right:0;}
.popup-table{display:table;width:100%;height:100%;}
.popup-table-cell{display:table-cell;vertical-align:middle;text-align:center;}
.popup-body{display:inline-block;border:1px solid black;padding:3em;}

在此处上传了一个代码示例：http://codepen.io/anon/pen/NdGpje

** 请注意，.popup课程只是一个包装，您不必使用它 - 只是为了让中间位置有一个简单的用例，和.popup-table的包装元素。

Answer 2

以下是CSS Tricks的一个非常简单的示例。您可以将元素顶部边距设置为50％，然后将其高度提高一半。这是代码：

body {
  background: #f06d06;
  font-size:  80%;
}

#div1 {
  background: white;
  height:     300px;
  margin:     20px;
  width:      300px;
  position:   relative;
  resize:     vertical;
  overflow:   auto;
}

#div1 div {
  position:   absolute;
  top:        50%;
  left:       20px;
  right:      20px;
  background: black;
  color:      white;
  padding:    20px;
  transform:  translateY(-50%);
  resize:     vertical;
  overflow:   auto;
}

<body>
  <div id="div1">
    <div>
      I'm a block-level element with an unknown height, centered vertically within my parent.
    </div>
  </main>
</body>

Answer 3

我个人用来垂直对齐div中内容的技巧是display: table; display: table-cell;和vertical-align:middle;，如下所示：

HTML：

<div class="block">
  <div class="block__module">
    <h1>Title</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo pellentesque est quis mollis. Nulla suscipit risus a ornare viverra. Suspendisse potenti. Phasellus tempor imperdiet ullamcorper. Nam accumsan volutpat tincidunt. Cras eu mauris posuere, imperdiet elit ac, rutrum ligula. Maecenas ullamcorper sit amet nisi vitae consectetur. Sed ultrices lorem a fermentum lacinia.
    </p>
  </div>
</div>

CSS：

.block {
  display:table;
  height: 500px;
  width:100%;
}

.block__module {
  display:table-cell;
  vertical-align:middle;
}

Here是我的代码的小提琴链接。

我了解您的内容可能是动态的，我不确定将div的height更改为100%是否有助于实现相同的结果，但这种垂直对齐方式至少可以起作用IE8加。我总是声明一个高度但我明白这不是我们可以做的事情。

我在SO上找到了一个类似的问题可能有所帮助，请参阅here。

我也遇到过这个方便的代码生成器，可能有所帮助，请参阅here。它为您提供了填充某些值的选择，并为垂直对齐生成了最佳选项。

最受支持的垂直对齐方法？

3 个答案: