HTML:将 div 的内容水平和垂直居中？

Question

我阅读了很多东西来尝试，但仍然无法正常工作。我有一个包含一些内容的 div，我希望内容垂直和水平居中。当我执行以下操作时，它们垂直居中，但向左对齐。如果我删除 display: table-cell，它们水平居中但对齐到顶部。

<div class='contents'>
  <span>a span</span><br>
  <span>b span</span><br>
  <span>c span</span>
</div>

.contents {
  height: 150px;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
}

Answer 1

我试过你的例子，效果很好。是否在特定浏览器中它不适合您？

.contents {
  height:100px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: red;
}

<div class='contents'>
  <span>a span</span>
  <br>
  <span>b span bit longer</span>
  <br>
  <span>c span</span>
</div>