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

Question

I read a bunch of things to try, but still can't get this working. I have a div with some contents, I'd like the contents to be centered vertically and horizontally. When I do the below, they center vertically, but justify to the left. If I remove the display: table-cell , they center horizontally but justify to the top.

<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

I tried your example and this is working fine. Is it in a certain browser that it is not working for you?

 .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

You probably have another CSS declaration that has a higher specificity. Here's an example:

 #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> 

This article might help too.