HTML5 CSS3 <a> element not centering inside of <div> element - html

Question

#buttoncontainer {
position: absolute;
top: 15%;
left: 23%;
width: 200px;
height: 500px;
}
.buttons {
position: absolute;
display: block;
width: 70px;
height: 70px;
font-family: DancingScript-Regular;
font-size: 100%;
padding-top: 50px;
background-color: rgba(255,255,255,.0);
padding: 15px 15px;
border: 5px solid white;
border-radius: 70px;
box-shadow: 0px 0px 5px 5px #000000, 0 0 5px 5px #888 inset;
left: 15%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
.buttonText {
text-align: center;
display: block;
padding: 25px;
width: 70px;
height: 70px;
font-size: 100%;
text-decoration: none;
color: white;
}
#b11 {
top: 30px;
}
#b22 {
top: 170px;
}
#b33 {
top: 305px;
}
<div id="buttoncontainer">
<div class="buttons" id="b11">
Upload
</div>
<div class="buttons" id="b22">
Refresh
</div>
<div class="buttons" id="b33">
Logout
</div>
</div>
I am trying to make the element fill up its parent container. But for some reason it doesn't align itself- as a whole block element inside/center of it's container, but instead pushes itself downwards and to the right. Can't figure out what I am doing wrong.
EDIT: I forgot to mention that I need the padding to center the text vertically in the bubble. I also tried padding-top: 25px; an still no success on centering the a block element.
EDIT2: I added text-align: center which centers the text correctly in the a element, but again the a element is not centering inside the div.

Answer 1

Here is a Working Demo
Do this in your CSS -
.buttons { text-align: center;
position: absolute;
display: block;
width: 70px;
height: 70px;
font-family: DancingScript-Regular;
font-size: 100%;
padding-top: 50px;
background-color: rgba(255,255,255,.0);
padding: 15px 15px;
border: 5px solid white;
border-radius: 70px;
box-shadow: 0px 0px 5px 5px #000000, 0 0 5px 5px #888 inset;
left: 15%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
.buttonText { /*
width: 70px;
height: 70px;*/
display: inline-block;
padding: 18px 0 0 0;
font-size: 100%;
text-decoration: none;
color: black;
}

Answer 2

This centers your text vertically and horizontally in the center of the button.
.buttonText {
text-align: center;
line-height: 70px;
vertical-align:middle;
display: block;
margin: auto auto;
font-size: 100%;
text-decoration: none;
color: white;
}
Hope this helps!
(EDIT: Adjust your line height to the height of the button. vertical-align:middle; will center it vertically)

Answer 3

Remove padding from class .buttonText
Add line-height: 70px;, text-align: center; to center the links.
.buttonText {
display: block;
line-height: 70px;
text-align: center;
padding: 0; /*Change padding to 0*/
width: 70px;
height: 70px;
font-size: 100%;
text-decoration: none;
color: white;
}
Here's a Fiddle

Answer 4

Remove this in your CSS:
.buttonText {padding: 25px;}
Make it as:
.buttonText {padding: 0;}

Answer 5

Thank you all for the suggestions....I finally got it to work with:
.buttonText {
margin-left: -23px;
margin-top: -23px;
position: absolute;
text-align: center;
padding: 28px;
padding-top: 50px;
padding-bottom: 50px;
font-size: 100%;
text-decoration: none;
color: white;
}
Not sure why this one gave me such a hard time...I usually don't have issues when doing buttons like these.