trying to align html button at the center of the my page

Question

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    lt button type  button  style  background-color yellow margin-left auto margin-right auto display block margin-top 22  margin-bottom 0   gt     mybuttonname  lt  button gt

User · Answer

Here is the solution as asked    x000D   x000D   lt button type  button  style  background-color yellow margin auto display block  gt mybuttonname lt  button gt  x000D   x000D   x000D

User · Answer

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   lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt  html body height  100    body width  100     lt  style gt   lt  head gt   lt body style  display  table  background-color   ff0000    gt    lt div style  display  table-cell  vertical-align  middle  text-align  center   gt       lt button type  button  style  text-align  center   class  btn btn-info  gt         Discover More      lt  button gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

Place it inside another div  use CSS to move the button to the middle    lt div style  width 100  height 100  position absolute vertical-align middle text-align center   gt       lt button type  button  style  background-color yellow margin-left auto margin-right auto display block margin-top 22  margin-bottom 0   gt  mybuttonname lt  button gt    lt  div gt     Here is an example  JsFiddle

User · Answer

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

User · Answer

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

User · Answer

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      JsFiddle   this also works if they re inline and you want to center two buttons side to side - try doing that with percentages

User · Answer

You can center a button without using text-align on the parent div by simple using margin auto  display block  For example  HTML  lt div gt     lt button gt Submit lt  button gt   lt  div gt   CSS button     margin auto    display block     SEE IT IN ACTION  CodePen

User · Answer

Here s your solution  JsFiddle  Basically  place your button into a div with centred text    lt div class  wrapper  gt       lt button class  button  gt Button lt  button gt   lt  div gt    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

User · Answer

try this it is quite simple and give you cant make changes to your  css file this should work   lt p align  center  gt   lt button type  button  style  background-color yellow margin-left auto margin-right auto display block margin-top 22  margin-bottom 0   gt  mybuttonname lt  button gt   lt  p gt

[html] trying to align html button at the center of the my page

Examples related to html

Examples related to css

Examples related to button

Examples related to alignment

Examples related to vertical-alignment