Aligning a button center middle (long text) - html

Question

I'm trying to align a button in the middle of a scalable/responsive div. The problem is, the button isn't actually centered here. What am I missing? fiddle
div{
text-align: center;
}
button{
position: absolute;
top: 50%;
left: 40%;
}

Answer 1

When you use position: absolute; for centering elements, you need to negate the margin which are half of the size of the absolute positioned element. So say if your button is 100px in width you need to negate margin-left: -50px;
So in your case, am hardcoding 250px of the width so I negated -125px, same goes for height as well, if the height of the element is say 30px use margin-top: -15px;
button{
position: absolute;
top: 50%;
left: 50%;
margin-left: -125px;
width: 250px;
/* Use height as well if you need so, along with margin-top which
will have 1/2 of the negative value of the elements height */
}
Demo
The other way to achieve this is to use display: table-cell; with vertical-align set to middle
On the other hand, if you do not want to use negative margin you can use calc() as well
button{
position: absolute;
top: 50%; /* Use calc here too if you define height */
left: calc(50% - 125px); /* Half of the elements width */
width: 250px;
}
Demo 2

Answer 2

Try this code:
DEMO
button{
position: absolute;
top: 50%;
left:25%;
width:50%
}

Answer 3

You have to reduce the height/ width of the button from it's position as well.
Try this
button{
position: absolute;
top: 50%;
left: 50%;
margin-left: -112px;
margin-top: -25px;
}
Fiddle
DEMO

Answer 4

Here is your updated fiddle http://jsfiddle.net/pMxty/122/
a Bit of jQuery resolves it.
HTML
<div>
<button>Load my random useless data</button>
</div>
css
div {
text-align: center;
}
button {
position: absolute;
top: 50%;
}
jQuery
function place()
{
var a = $("div").outerWidth() / 2,
b = $("button").outerWidth() / 2;
$("button").css({
"left": (a - b)
});
}
$(document).ready(function(){
place();
$(window).resize(function(){
place();
});
});