Thursday, June 28, 2012

HTML - DIV vertically center align image/elements

After answering the same question many times on SO(Stackoverflow) I thought of putting this post here. It's very simple with CSS display: table-cell; property.

The display: table-cell; property is supported by all browsers except IE7: When can I use CSS Table display?

    <img src="" />

  width: 500px;
  height: 500px;
  border: 1px solid #f00;
  text-align: center;
  display: table-cell;
  vertical-align: middle;

Here is the demo -