css trick for centering horizontal and vertical

My 开发者_如何学C.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;
}

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;
}

What is its parent?

.parent {
   position: relative;   
}

.cent {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -10px;
   margin-top: -10px;
}

Or if you want vertical-align: middle to work, set display: table-cell.

Try to set the style for li tag, margin and padding tags are will help you

Like,

# set default
li 
  {
  margin: 0;
  padding: 0;
  }

after write the style for your class cent, it will be affect the li tag properly.