Centering my button with using a div element [duplicate] - html

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>

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

With the limited detail provided, I will assume the most simple situation and say you can use text-align: center:
http://jsfiddle.net/pMxty/

Answer 5

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>

Answer 6

Using flexbox
.Center {
display: flex;
align-items: center;
justify-content: center;
}
And then adding the class to your button.
<button class="Center">Demo</button>

Answer 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>

Answer 8

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.

Answer 9

Came across this and thought I'd leave the solution I used as well, which utilizes line-height and text-align: center to do both vertical and horizontal centering:
Click here for working JSFiddle

Answer 10

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

Answer 11

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.

Answer 12

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

Answer 13

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/

Answer 14

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>

Answer 15

div {
text-align : center;
}
button {
width: 50%;
margin: 1rem auto;
}
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
This is what I mostly do.
I think bootstrap also uses this in "mx-auto".

Answer 16

var element = document.getElementById('btn1');
var elementwidth = element.clientWidth;
var elementheight = element.clientHeight;
element.style.left = 'calc(50% - ('+elementwidth+'px / 2) )';
element.style.top = 'calc(50% - ('+elementheight+'px / 2) )';
#btn1{
position: relative;
}
div{
height:200px;
width:200px;
border: 1px solid black;
}
<html>
<body>
<div>
<input type = 'button' id = 'btn1'>
</div>
</body>
</html>