Elemento não centraliza

Caros,

Tudo bem com vocês?

Estou desenvolvendo um website responsivo, baseado em layout fluído e media queries, porém estou enfrentando um problema no alinhamento de um elemento específico, o link da div.Button, confira:

 <section class="Contact">
 <div class="Text">
 <h1>XYZ</h1>
 <p>xxx xxx xxx xxx xxx xxx xxx xxx xxx <br>
 xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx</p>
 </div>

 <div class="Button">
 <a href="" target="_self">xxxxxx xxx</a>
 </div>
 </section>

Que como padrão tem o seguinte css:

#Home .Contact { background:#DDD; background:linear-gradient(to bottom, #DDD 0%, #EEE 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#EEEEEE', GradientType=0); width:90%; height:auto; padding:0 5%; float:left; position:relative; }

#Home .Contact .Text { width:75%; height:auto; margin:10px 0; float:left; }
#Home .Contact .Text p { font-size:1.7rem; }
#Home .Contact .Text h1 { font-weight:bold; font-size:3rem; }

#Home .Contact .Button { width:20%; height:auto; margin:-25px 0; float:right; position:absolute; top:50%; right:5%; }
#Home .Contact .Button a{ background:#333; color:#FFF; text-decoration:none; text-align:center; font-weight:bold; fon

E para o media query o seguinte css:

#Home .Contact .Text { width:100%; height:auto; }
#Home .Contact .Text p { font-size:1rem; text-align:center; }
#Home .Contact .Text h1 { font-size:2rem; text-align:center; }

#Home .Contact .Button { width:100%; height:auto; margin:10px auto; clear:both; position:static; background:#F00; }
#Home .Contact .Button a{ margin:0 auto; clear:both; float:none; }

Só que infelizmente o botão fica jogado na esquerda, e nada, nada, nada o faz centralizar.

Alguém consegue me ajudar a resolver este problema?