HTML-CSS Center Text horizontally and vertically in a link

Question

I am trying to make a link which has a height and a width of 200px. The text of the link shall be centered vertically and horizontally.

This is my CSS so far:

a:link.Kachel {   width: 200px;   height: 200px;   margin: 0 auto;   display: block;   text-align: center;   background: #383838;   display: -webkit-box;   display: -moz-box;   display: box;   -webkit-box-align: center;   -moz-box-align: center;   box-align: center; } 

and this the HTML-code:

<tr>   <td>     <a class="Kachel" href="#">Test</a>   </td> </tr> 

The text is horizontally centered but not vertically.

Any idea how to get the text centered both horizontally and virtically?

Answer 1

remove all that other nonsense, and just replace height with line-height

a:link.Kachel{    width: 200px;    line-height: 200px;    display: block;    text-align: center;    background: #383838; } 

jsfiddle: http://jsfiddle.net/6jSFY/

Answer 2

In CSS3, you can achieve this with a flexbox without any extra elements.

.link {     display: flex;     justify-content: center;     align-items: center; }