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> 

Answer 2

您可能還有另一個具有更高特異性的CSS聲明。 這是一個例子：

 #container div { text-align:left; } .contents { height: 100px; width:100px; text-align: center; display: table-cell; vertical-align: middle; background: green; } 

 <div id="container"> <div class='contents'> <span>a span</span> <br> <span>splurge b span</span> <br> <span>c span</span> </div> </div> 

本文可能也有幫助。