How to align entire html body to the center

Question

How do I align entire html body to the center

User · Answer

lt style gt          body              max-width  1180px              width  98               margin  0px auto              text-align  left             lt  style gt      Just apply this style before applying any CSS  You can change width as per your need

User · Answer

If I have one thing that I love to share with respect to CSS  it s MY FAVE WAY OF CENTERING THINGS ALONG BOTH AXES     Advantages of this method    Full compatibility with browsers that people actually use No tables required Highly reusable for centering any other elements inside their parent Accomodates parents and children with dynamic  changing  dimensions    I always do this by using 2 classes  One to specify the parent element  whose content will be centered   centered-wrapper   and the 2nd one to specify which child of the parent is centered   centered-content   This 2nd class is useful in the case where the parent has multiple children  but only 1 needs to be centered   In this case  body will be the  centered-wrapper  and an inner div will be  centered-content    lt html gt       lt head gt     lt  head gt       lt body class  centered-wrapper  gt           lt div class  centered-content  gt     lt  div gt       lt  body gt   lt  html gt    The idea for centering will now be to make  centered-content an inline-block  This will easily facilitate horizontal centering  through text-align  center   and also allows for vertical centering as you shall see    centered-wrapper       position  relative      text-align  center     centered-wrapper before       content          position  relative      display  inline-block      width  0  height  100       vertical-align  middle     centered-content       display  inline-block      vertical-align  middle      This gives you 2 really reusable classes for centering any child inside of any parent  Just add the  centered-wrapper and  centered-content classes   So  what s up with that  before element  It facilitates vertical-align  middle  and is necessary because vertical alignment isn t relative to the height of the parent - vertical alignment is relative to the height of the tallest sibling     Therefore  by ensuring that there is a sibling whose height is the parent s height  100  height  0 width to make it invisible   we know that vertical alignment will be with respect to the parent s height   One last thing  You need to ensure that your html and body tags are the size of the window so that centering to them is the same as centering to the browser   html  body       width  100       height  100       padding  0      margin  0      Fiddle  https   jsfiddle net gershy g121g72a

User · Answer

I use flexbox on html  For a nice effect  you can match the browsers chrome so as to frame your content on screen sizes larger than your page maximums  I find that  eeeeee matches pretty well  You could add a box shadow for a nice float effect       html          display  flex          flex-flow  row nowrap            justify-content  center          align-content  center          align-items  center          height 100           margin  0          padding  0          background  eeeeee            body           margin  0          flex  0 1 auto          align-self  auto            recommend 1920   1080 max based on usage stats  use 100  to that point           width  100          max-width  900px          height  100           max-height  600px          background  fafafa          -webkit-box-shadow  0px 0px 96px 0px rgba 0 0 0 0 75           -moz-box-shadow  0px 0px 96px 0px rgba 0 0 0 0 75           box-shadow  0px 0px 96px 0px rgba 0 0 0 0 75             image data courtesy StatCounter

User · Answer

Try this body   max-width  max-content  margin  auto

User · Answer

I just stumbled on this old post  and while I m sure user01 has long since found his answer  I found the current answers don t quite work  After playing around for a little bit using info provided by the others  I found a solution that worked in IE  Firefox  and Chrome  In CSS   html  body       height  100      html       display  table      margin  auto     body       display  table-cell      vertical-align  middle      This is almost identical to abernier s answer  but I found that including width would break the centering  as would omitting the auto margin  I hope anyone else who stumbles on this thread will find my answer helpful    Note  Omit html  body   height  100     to only center horizontally

User · Answer

Just write   lt body gt      lt center gt               Your Code Here      lt  center gt  lt  body gt

User · Answer

EDIT  As of today with flexbox  you could  body     display flex  flex-direction column  justify-content center    min-height 100vh        PREVIOUS ANSWER  html  body  height 100    html  display table  width 100    body  display table-cell  text-align center  vertical-align middle

User · Answer

You can try   body  margin 0 auto

User · Answer

http   bluerobot com web css center1 html  body       margin 50px 0       padding 0      text-align center      Content       width 500px      margin 0 auto      text-align left      padding 15px      border 1px dashed  333      background-color  eee

[html] How to align entire html body to the center?

Examples related to html

Examples related to css