Centering all text of <a> as display block, vertically and horizontally - html

Question

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<style>
#metro {
width: 100%
height: auto;
font-size: 16px;
}
#metro .metro_half_row {
width: 50%;
float: left;
height: 100px;
color: white;
background-color: grey;
}
#metro .metro_half_row a {
display: block;
height: inherit;
text-align: center;
}
</style>
<div id="metro">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
I've wrapper as #metro, .metro_half_row as each section, using a display: block
Right now the text in <a> is centered horizontally, but not vertically. I need to center the text contained in the links, and each <a> covering the entire sub div block both horizontally and vertically.

Answer 1

display: table and display: table-cell are your friends.
#metro {
width: 100%;
height: auto;
font-size: 16px;
}
#metro .table-block {
width: 100%;
display: table;
}
#metro .table-cell {
width: 50%;
display: table-cell;
vertical-align: middle;
}
#metro .metro_half_row {
width: 100%;
height: 100px;
color: white;
background-color: grey;
display: table;
}
#metro .metro_half_row a {
width: 100%;
display: table-cell;
height: inherit;
text-align: center;
vertical-align: middle;
}
<link href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" rel="stylesheet" />
<div id="metro">
<div class="table-block">
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
</div>
<div class="table-block">
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
</div>
</div>

Answer 2

If i understand your problem correctly in your case, the CSS may look like this:
a{
margin-top:25px;
}
or
a{
position: relative;
top: 25%;
}

Answer 3

Try:
#metro .metro_half_row a {
display: table-cell;
width: inherit;
vertical-align: middle;
height: inherit;
text-align: center;
}
#metro .metro_half_row {
display: table;
}
view http://jsfiddle.net/alemarch/589pqd62/