Placing link in the middle (horizontally/vertically) inside the div

Question

I need to center link inside the div vertically and horizontally.

My CSS:

    .div {
       display:block;
       background:red;
       width:162px;
       height:168px;
    }
    .span { }
    .link { }

My HTML:

    <div class="div">
       <span class="span">
          <a href="#" class="link"> Text in middle </a>
       </span>
    </div>

Link: http://jsfiddle.net/pjWUC/

Answer 1

Based on the coding in your example, use:

Updated jsFiddle example - a element is centered vertically and horizontally.

.div {
    display:table;
    background:red;
    width:162px;
    height:168px;
}
.span {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Answer 2

.div {
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    ...
}

Unfortunately, display:table-cell is not supported by IE according to this.