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

Question

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> 

Solution 1

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.

Solution 2

You can center a button without using text-align on the parent div by simple using margin:auto; display:block;

For example:

HTML

<div>
  <button>Submit</button>
</div>

CSS

button {
  margin:auto;
  display:block;
}

SEE IT IN ACTION: CodePen

Solution 3

Edit by author: This is a really out of date answer! Flexbox or grid are much better.

---

I've really taken recently to display: table to give things a fixed size such as to enable margin: 0 auto to work. Has made my life a lot easier. You just need to get past the fact that 'table' display doesn't mean table html.

It's especially useful for responsive design where things just get hairy and crazy 50% left this and -50% that just become unmanageable.

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

In addition if you've got two buttons and you want them the same width you don't even need to know the size of each to get them to be the same width - because the table will magically collapse them for you.

JsFiddle

(this also works if they're inline and you want to center two buttons side to side - try doing that with percentages!).

Solution 4

try this it is quite simple and give you cant make changes to your .css file this should work

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

Solution 5

Here is the solution as asked

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

View more solutions

Comments

[Saily Jadhav]

Check this out: codepen.io/saily_center_button/pen/ZEeeEyr

[user1455116]

hi, i saw in the results box, the button is to the extreme left and is at the vertical middle of the page, isn't that what you see?

[user1455116]

here i cannot use a seperate css file. Actually this is a XSL file where is embedded html code. There is only one button to be displayed as this is small test to see how the button appears. Hence, i cannot create another css file. If i create another css file for this button, then i need an XML, XSL and CSS file for this simple functionality. I will be using a seperate CSS for the future functionalities which are comples

[Gyhth]

That depends on the browser you're using. I've noticed that IE doesn't take kindly to margin-left and margin-right things, so to center use text-align: center; on the div to fix it for IE.

[Mohamad]

See my edit, and this fiddle: You should be able to grab that CSS and put it inline: jsfiddle.net/7Laf8

[user1455116]

Hi, the IE displays it to the extreme left but still being at the vertical center. But when i use your code in my file, inline, it displays fine on my page. I will have to check with other browsers too today evening. Thank you

[Mohamad]

Make sure no other CSS is interfering with it. That could be an issue! You're welcome!

[user1455116]

I tried this already, this is browser dependent not displaying properly in IE probably because margin-right:auto and margin-left:auto are not understood properly by IE

[Ashwin G]

But why get in an unnecessary div. The issue is to just center align the button.

[Mohamad]

@AshwinG you can't center a button element without a wrapper. The only way is to use the body as a wrapper. This means everything gets centered. If you want non-centered elements, you'll have to provide wrapper elements for those. I don't think the extra div is worse than applying custom rules for navigation and other page elements that would otherwise be affected.

[Ashwin G]

@Mohamad Alrite!!!Thanx dude

[Nick Graham]

This centers the left edge of the button, but I want to center the center of the button. Screenshot from Fiddle

[Ethan]

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

[MadhuriJain]

Hi @Davіd hope the updated answer will help with the additional context. Cheers

[aruno]

Use flex box now. Align-self: stretch

[Admin]

not working for my button in bootstrap...

[Admin]

not working for me

[Chukwu3meka]

not also working in mui

[aruno]

Or grid! Even more flexible :-)