How to center a button within a div?

Question

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>

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 =(. — mrtsherman, Sep 26 '11 at 20:35

Loktar · Accepted Answer · 2021-08-25T03:20:27.300

446

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;
}

edited Aug 25 '21 at 03:20

answered Sep 26 '11 at 20:23

Loktar

34,764
7
90
104

25

-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. – CodyBugstein Mar 19 '14 at 10:29
4

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 :) – Loktar Mar 19 '14 at 14:32
2

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 – CodyBugstein Mar 19 '14 at 14:53

score 135 · Answer 2 · edited Oct 07 '19 at 19:30

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.

edited Oct 07 '19 at 19:30

Rich

6,470
15
32
53

answered Nov 06 '14 at 13:21

RenatoSz

1,707
2
12
8

Pat · Answer 3 · 2020-01-06T15:34:59.893

37

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.

edited Jan 06 '20 at 15:34

answered Sep 26 '11 at 20:23

Pat

25,237
6
71
68

13

you may also need "display: block;" – SoluableNonagon Dec 08 '14 at 20:48
1

@SoluableNonagon That's it ! "display: block" does the trick with "margin: 0 auto" – Tomas Lukac Jan 06 '20 at 13:53

score 8 · Answer 4 · edited Mar 24 '23 at 21:27

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>

edited Mar 24 '23 at 21:27

miken32

42,008
16
111
154

answered Sep 26 '11 at 20:24

James Montagne

77,516
14
110
130

adeneo · Answer 5 · 2016-09-22T19:33:24.080

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>

@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. — adeneo, Sep 22 '16 at 19:21
You can always use flex to center an element both vertically and horizontally. — Pranesh Ravi, Sep 22 '16 at 19:24
@PraneshRavi - yes you can, flexbox is a great answer to this question, and I'll add that, but in 2011 there was no flexbox. — adeneo, Sep 22 '16 at 19:25
@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 — adeneo, Jul 14 '18 at 13:34

score 7 · Answer 6 · answered Dec 08 '15 at 16:45

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>

answered Dec 08 '15 at 16:45

yask

3,918
4
20
29

score 7 · Answer 7 · answered Sep 12 '18 at 19:38

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>

Billal Begueradj · Answer 8 · 2016-09-22T19:16:28.970

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:

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

score 2 · Answer 9 · edited Jul 14 '18 at 18:38

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.

edited Jul 14 '18 at 18:38

JGallardo

11,074
10
82
96

answered Sep 26 '11 at 22:21

Victor Nițu

1,485
13
18

score 1 · Answer 10 · answered Jun 23 '15 at 01:41

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 ;
  }

answered Jun 23 '15 at 01:41

Ashhad Sameer

9
3

score 1 · Answer 11 · answered Feb 14 '17 at 21:08

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/

score 1 · Answer 12 · answered Apr 29 '18 at 17:57

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>

answered Apr 29 '18 at 17:57

Maizied Hasan Majumder

1,197
1
12
25

1

This answer could be improved by removing inline styles and showing a demo – JGallardo Jul 14 '18 at 18:39

score 1 · Answer 13 · answered Jul 13 '18 at 18:21

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

answered Jul 13 '18 at 18:21

JGallardo

11,074
10
82
96

How to center a button within a div?

13 Answers13

Linked

Related