trying to align html button at the center of the my page

html css button alignment vertical-alignment
user1455116 picture user1455116 · Aug 3, 2012 · Viewed 877k times · Source

I'm trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc..

I want it to be both vertically and horizontally be centered. Here is what I have written right now:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button>

Answer

Mohamad picture Mohamad · Aug 3, 2012

Here's your solution: JsFiddle

Basically, place your button into a div with centred text:

<div class="wrapper">
    <button class="button">Button</button>
</div>

With the following styles:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

There are many ways to skin a cat, and this is just one.

Related questions

How to center buttons in Twitter Bootstrap 3?

I am building a form in Twitter Bootstrap but I'm having issues with centering the button below the input in the form. I have already tried applying the center-block class to the button but that didn't work. How should I …

Read More
Embed image in a <button> element

I'm trying to display a png image on a <button> element in HTML. The button is the same size as the image, and the image is shown but for some reason not in the center - so it's …

Read More
How to set text color in submit button?

I tried to change the color of the text in the submit button type but, I don't know why I am not able to change it. I was getting a problem when I tried to change the color of the …

Read More