css trick for centering horizontal and vertical

Question

My .cent class is for <li> elements. I want to center the text of the <li> both horizontally and vertically. text-align:center; takes care of horizontal centering, but the vertical centering isn't working. What's the CSS trick for this?

.cent{
  height:20px;
  width:20px;
  text-align:center;
  vertical-align: middle;
}

Answer 1

Use line-height property.

Set it equal to height of element, and text will be vertically centered.

.cent{
  height: 20px;
  width: 20px;
  text-align: center;
  /*vertical-align: middle;*/
  line-height: 20px;
}