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    x000D   x000D   lt div style  width 100   height 100   border  1px solid  gt  x000D     lt button type  button  gt hello lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To center a  lt button type    button  gt  both vertically and horizontally within a  lt div gt  which width is computed dynamically like in your case  this is what to do    Set text-align  center  to the wrapping  lt div gt   this will center the button whenever you resize the  lt div gt   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

User · Answer

You should take it simple here you go     first you have the initial position of your text or button     lt div style  background-color green  height 200px  width 400px  margin 0 0 0 35    gt      lt h2 gt  Simple Text  lt  h2 gt         lt div gt              lt button gt  Simple Button  lt  button gt         lt  div gt   lt  div gt      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      lt div style  background-color green  height 200px  width 400px  margin 0 0 0 35    gt   lt h2 style  text-align center   gt  Simple Text  lt  h2 gt   lt  --  lt  lt --- here the changes -- gt          lt div style  text-align center  gt          lt  --  lt  lt --- here the changes -- gt                   lt button gt  Simple Button  lt  button gt         lt  div gt   lt  div gt

User · Answer

Using flexbox   Center     display  flex    align-items  center    justify-content  center      And then adding the class to your button    lt button class  Center  gt Demo lt  button gt

User · Answer

Responsive way to center your button in a div    lt div      style  display  flex      align-items  center      justify-content  center      margin-bottom  2rem   gt       lt button type  button  style  height  10   width  20    gt hello lt  button gt   lt  div gt

User · Answer

x000D   x000D  div       text-align   center    button       width  50       margin  1rem auto    x000D   lt div style  width 100   height 100   border  1px solid  gt     lt button type  button  gt hello lt  button gt   lt  div gt  x000D   x000D   x000D   This is what I mostly do    I think bootstrap also uses this in  quot mx-auto quot

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt div data-element  card  gt     lt div data-container  button  gt  lt button gt CTA    lt  button gt  lt  div gt   lt  div gt    CSS   data-container  button       position  absolute    top  50     text-align  center    width  100       Fiddle  https   jsfiddle net crrollyson zebo1z8f

User · Answer

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       x000D   x000D   container   x000D    position  relative  x000D    margin  20px  x000D    background  red  x000D    height  300px  x000D    width  400px  x000D    x000D   x000D   container div   x000D    display  -webkit-box  x000D    display  -moz-box  x000D    display  -ms-flexbox  x000D    display  -webkit-flex  x000D    display  flex  x000D    -webkit-box-align  center  x000D    -moz-box-align  center  x000D    -ms-flex-align  center  x000D    -webkit-align-items  center  x000D    align-items  center  x000D    justify-content  center  x000D    -webkit-box-pack  center  x000D    -moz-box-pack  center  x000D    -ms-flex-pack  center  x000D    -webkit-justify-content  center  x000D    justify-content  center  x000D    x000D   lt  -- using a container to make the 100  width and height mean something -- gt  x000D   lt div id  container  gt   x000D     lt div style  width 100   height 100   gt  x000D       lt button type  button  gt hello lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You could just make    x000D   x000D   lt div style  text-align  center  border  1px solid  gt  x000D     lt input type  button  value  button  gt  x000D   lt  div gt  x000D   x000D   x000D    Or you could do it like this instead    x000D   x000D   lt div style  border  1px solid  gt  x000D     lt input type  button  value  button  style  display  block  margin  0 auto   gt  x000D   lt  div gt  x000D   x000D   x000D    The first one will center align everything inside the div  The other one will center align just the button

[html] How to center a button within a div?

Examples related to html

Examples related to css

Examples related to centering