120

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
user1455116
  • 2,034
  • 4
  • 24
  • 48

9 Answers9

174

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.

MrMaavin
  • 1,611
  • 2
  • 19
  • 30
Mohamad
  • 34,731
  • 32
  • 140
  • 219
  • 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 – user1455116 Aug 03 '12 at 16:02
  • See my edit, and this fiddle: You should be able to grab that CSS and put it inline: http://jsfiddle.net/7Laf8/ – Mohamad Aug 03 '12 at 16:05
  • 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 – user1455116 Aug 03 '12 at 16:10
  • Make sure no other CSS is interfering with it. That could be an issue! You're welcome! – Mohamad Aug 03 '12 at 16:11
  • But why get in an unnecessary div. The issue is to just center align the button. – Ashwin G Jul 09 '13 at 05:40
  • 1
    @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. – Mohamad Jul 09 '13 at 15:48
  • This centers the left edge of the button, but I want to center the center of the button. [Screenshot from Fiddle](https://drive.google.com/file/d/0B-R377MBptn9ajA5OFJsbWRRYkU/view?usp=sharing) – Nick Graham Aug 09 '17 at 14:28
  • If you are adding this instyle, you will need to add `left: 50%;` like so `style="text-align: center; position: absolute; top: 50%; left: 50%;"` – Lafftar Aug 24 '22 at 01:27
81

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

maudulus
  • 10,627
  • 10
  • 78
  • 117
23

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.

enter image description here

JsFiddle

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

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
10

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>
Rick Roy
  • 1,656
  • 2
  • 21
  • 47
  • 1
    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 – user1455116 Aug 03 '12 at 16:55
7

Here is the solution as asked 

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>
joy oares
  • 155
  • 2
  • 11
6

There are multiple ways to fix the same. PFB two of them -

1st Way using position: fixed - position: fixed; positions relative to the viewport, which means it always stays in the same place even if the page is scrolled. Adding the left and top value to 50% will place it into the middle of the screen.

 button {
   position: fixed;
   left: 50%;
   top:50%;
 }

2nd Way using margin: auto -margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually absolute centering only requires a declared height and these styles:

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}
MadhuriJain
  • 145
  • 2
  • 4
  • 1
    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. – Ethan Jul 25 '18 at 04:52
  • Hi @Davіd hope the updated answer will help with the additional context. Cheers – MadhuriJain Jul 30 '18 at 09:27
5

For me it worked using flexbox.

Add a css class around the parent div / element with :

.parent {
    display: flex;
}

and for the button use:

.button {
    justify-content: center;
}

You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.

Royal
  • 367
  • 2
  • 6
  • 15
1

Place it inside another div, use CSS to move the button to the middle:

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-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> 
</div>​

Here is an example: JsFiddle

MrMaavin
  • 1,611
  • 2
  • 19
  • 30
Tim Withers
  • 12,072
  • 5
  • 43
  • 67
  • 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 Aug 03 '12 at 15:59
  • 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. – Gyhth Aug 03 '12 at 16:03
0

Make all parent element with 100% width and 100% height and use display: table; and display:table-cell;, check the working sample.

Working Git Version

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <button type="button" style="text-align: center;" class="btn btn-info">
       Discover More
    </button>
</div>

</body>
</html>
MrMaavin
  • 1,611
  • 2
  • 19
  • 30
Ritesh Kumar
  • 114
  • 6