297

I have a div that's width is 100%.

I'd like to center a button within it, how might I do this?

<div style="width:100%; height:100%; border: 1px solid"> <button type="button">hello</button> </div>

Improve this question
2
  • what is the code you are using for the button? Commented Sep 26, 2011 at 20:21
  • 2
    I suspect that he wants both vertical and horizontal centering. None of the solutions so far accomplish this. CSS is not very good at vertical centering =(. Commented Sep 26, 2011 at 20:35

13 Answers 13

Reset to default
459

Updated Answer

Updating because I noticed it's an active answer, however Flexbox would be the correct approach now.

Live Demo

Vertical and horizontal alignment.

#wrapper { display: flex; align-items: center; justify-content: center; }

Just horizontal (as long as the main flex axis is horizontal which is default)

#wrapper { display: flex; justify-content: center; }

Original Answer using a fixed width and no flexbox

If the original poster wants vertical and center alignment its quite easy for fixed width and height of the button, try the following

Live Demo

CSS

button{ height:20px; width:100px; margin: -20px -50px; position:relative; top:50%; left:50%; }

for just horizontal alignment use either

button{ margin: 0 auto; }

or

div{ text-align:center; }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

-1 this is awful. Basically, you set the width to 100% and then the margin to -50. But is causes other problems, like the button rises above the containing element, and doesn't work well with resizing.
Hey thanks for at least explaining your down vote @Imray , Also note, I said fixed width and height, not variable. So resizing isn't a factor. "Basically" I set the width to 100px, not 100%, and margin to -50px which is half. This has been a pretty standard method for centering. I look forward to your answer though :)
Your welcs (sorry for the harshness, glad you have a sense of humor) I meant 100px. I didn't realize you wrote "fixed", but still I think this answer won't be good in most situations
135

You could just make:

<div style="text-align: center; border: 1px solid"> <input type="button" value="button"> </div>

Or you could do it like this instead:

<div style="border: 1px solid"> <input type="button" value="button" style="display: block; margin: 0 auto;"> </div>

The first one will center align everything inside the div. The other one will center align just the button.

Improve this answer

Comments

38

et voila:

button { width: 100px; // whatever your button's width margin: 0 auto; // auto left/right margins display: block; }

Update: If OP is looking for horizontal and vertical centre, this answer will do it for a fixed width/height element.

Improve this answer

2 Comments

you may also need "display: block;"
@SoluableNonagon That's it ! "display: block" does the trick with "margin: 0 auto"
8

Margin: 0 auto; is the correct answer for horizontal centering only. For centering both ways something like this will work, using jquery:

var cenBtn = function() { var W = $(window).width(); var H = $(window).height(); var BtnW = insert button width; var BtnH = insert button height; var LeftOff = (W / 2) - (BtnW / 2); var TopOff = (H / 2) - (BtnH /2); $("#buttonID").css({left: LeftOff, top: TopOff}); }; $(window).bind("load, resize", cenBtn);

Update ... five years later, one could use flexbox on the parent DIV element to easily center the button both horizontally and vertically.

Including all browser prefixes, for best support

div { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align : center; -moz-box-align : center; -ms-flex-align : center; -webkit-align-items : center; align-items : center ; justify-content : center; -webkit-justify-content : center; -webkit-box-pack : center; -moz-box-pack : center; -ms-flex-pack : center; } 

#container { position: relative; margin: 20px; background: red; height: 300px; width: 400px; } #container div { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
<!-- using a container to make the 100% width and height mean something --> <div id="container"> <div style="width:100%; height:100%"> <button type="button">hello</button> </div> </div>

Improve this answer

5 Comments

jQuery? Seriously?
@PraneshRavi - in 2011 there wasn't many options available in CSS to center something vertically, so yes, javascript was not uncommon if you didn't know the exact height and width of an element, and could subtract the margins.
You can always use flex to center an element both vertically and horizontally.
@PraneshRavi - yes you can, flexbox is a great answer to this question, and I'll add that, but in 2011 there was no flexbox.
@JGallardo - I think you missed the part where the other answers are trying to center the button not just horizontally, but vertically as well, and that 9 years ago there weren't really any good options to do that with CSS alone
8

With the limited detail provided, I will assume the most simple situation and say you can use text-align: center:

div { background: blue; padding: 1em; text-align: center; }
<div><button>test</button></div>

Improve this answer

Comments

7

Using flexbox

.Center { display: flex; align-items: center; justify-content: center; }

And then adding the class to your button.

<button class="Center">Demo</button>
Improve this answer

Comments

7

You should take it simple here you go :

first you have the initial position of your text or button :

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;"> <h2> Simple Text </h2> <div> <button> Simple Button </button> </div> </div>

By adding this css code line to the h2 tag or to the div tag that holds the button tag

style:" text-align:center; "

Finaly The result code will be : 

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;"> <h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes --> <div style="text-align:center"> <!-- <<--- here the changes --> <button> Simple Button </button> </div> </div>

enter image description here

Improve this answer

Comments

3

To center a <button type = "button"> both vertically and horizontally within a <div> which width is computed dynamically like in your case, this is what to do:

  1. Set text-align: center; to the wrapping <div>: this will center the button whenever you resize the <div> (or rather the window)

  2. For the vertical alignment, you will need to set margin: valuepx; for the button. This is the rule on how to calculate valuepx:

    valuepx = (wrappingDIVheight - buttonHeight)/2

Here is a JS Bin demo.

Improve this answer

Comments

2

Supposing div is #div and button is #button: 

#div { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: center; } #button {}

Then nest the button into div as usual.

Improve this answer

Comments

1

Easiest thing is input it as a "div" give it a "margin:0 auto " but if you want it to be centered u need to give it a width 

 Div{ Margin: 0 auto ; Width: 100px ; }
Improve this answer

Comments

1

Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns):

HTML

<div data-element="card"> <div data-container="button"><button>CTA...</button></div> </div>

CSS

[data-container="button"] { position: absolute; top: 50%; text-align: center; width: 100%; }

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/

Improve this answer

Comments

1

Responsive way to center your button in a div:

<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 2rem;"> <button type="button" style="height: 10%; width: 20%;">hello</button> </div>
Improve this answer

1 Comment

This answer could be improved by removing inline styles and showing a demo
1

Super simple answer that will apply to most cases is to just make set the margin to 0 auto and set the display to block. You can see how I centered my button in my demo on CodePen

enter image description here

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.