How to align a div to the middle horizontally width of the page

Question

I have a div tag with width set to 800 pixels  When the browser width is greater than 800 pixels  it shouldn t stretch the div  but it should bring it to the middle of the page

User · Accepted Answer

lt body gt       lt div style  width 800px  margin 0 auto   gt          centered content      lt  div gt   lt  body gt

User · Answer

lt body gt       lt div style   display  table  margin  250 auto   gt          In center      lt  div gt   lt  body gt    If you want to change the vertical position  change the value of 250 and you can arrange the content as per your need  There is no need to give the width and other parameters

User · Answer

Do you mean that you want to center it vertically or horizontally  You said you specified the height to 800 pixels  and wanted the div not to stretch when the width was greater than that    To center horizontally  you can use the margin  auto  attribute in CSS  Also  you ll have to make sure that the body and html elements don t have any margin or padding    html  body   margin  0  padding  0     centeredDiv   margin-right  auto  margin-left  auto  width  800px

User · Answer

Use the CSS flex property  http   jsfiddle net cytr j7SEa 6 show   body                            Centered      display  box    flex-align  center    flex-pack  center

User · Answer

x000D   x000D  parent   x000D      position  relative  x000D    x000D  child   x000D      position  absolute  x000D      left  50   x000D      transform  translateX -50    x000D    x000D   lt parent gt  x000D     lt child gt  x000D     lt  child gt  x000D   lt  parent gt  x000D   x000D   x000D

User · Answer

middle      margin 0 auto     text-align  center         it brings div to center

User · Answer

You can also use it like this    lt div style  width  60   margin  0px auto   gt      Your contents here     lt  div gt

User · Answer

For some reason  none of the previous answers worked for me really  This is what worked for me and it works across browsers as well    center       text-align  center      height  100           Safari  Opera  and Chrome        display  -webkit-box      -webkit-box-pack  center      -webkit-box-align  center          Firefox        display  -moz-box      -moz-box-pack  center      -moz-box-align  center          Internet Explorer 10        display  -ms-flexbox      -ms-flex-pack  center      -ms-flex-align  center

User · Answer

If your center content is deep inside other divs then only margin can save you  Nothing else  I face it always when not using a framework like Bootstrap

User · Answer

Flexbox solution is the way to go in from 2015  justify-content  center is used for the parent element to align the content to the center of it  HTML  lt div class  quot container quot  gt     lt div class  quot center quot  gt Center lt  div gt   lt  div gt   CSS  container     display  flex    justify-content  center     center     width  800px     Output  x000D   x000D   container     display  flex    justify-content  center     center     width  400px     padding  10px    background   5F85DB    color   fff    font-weight  bold    font-family  Tahoma    x000D   lt div class  container  gt     lt div class  center  gt Centered div with left aligned text  lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Simple http   jsfiddle net 8pd4qx5r   html     display  table    height  100     width  100      body     display  table-cell    vertical-align  middle      content     margin  0 auto    width  260px    text-align  center    background  pink

User · Answer

This also works in Internet nbsp Explorer  but auto margins do not    centered       position  absolute      display   inline-block      left      -500px      width     1000px      margin    0 50

User · Answer

Div centered vertically and horizontally inside the parent without fixing the content size  Here on this page is a nice overview with several solutions  too much code to share here  but it shows what is possible     Personally I like this solution with the famous transform translate -50  trick the most  It works well for both fixed    or px  and undefined height and width of your element  The code is as simple as   HTML    lt div class  center  gt  lt div gt    CSS    center     position  absolute    left  50     top  50     transform  translate -50   -50      -ms-transform  translate -50   -50       for IE 9      -webkit-transform  translate -50   -50       for Safari          optional size in px or         width  100px    height  100px      Here a fiddle that shows that it works

User · Answer

Use the below code for centering the div box    x000D   x000D   box-content  x000D      margin  auto  x000D      top  0  x000D      right  0  x000D      bottom  0  x000D      left  0  x000D      position  absolute  x000D      width  800px  x000D      height  100px  x000D      background-color  green  x000D    x000D   lt div class  box-content  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Centering without specifying div width   body     text-align  center     body       text-align  initial     body div     display  inline-block      This is something like  lt center gt  tag does  except    all direct inline childs elements  eg   lt h1 gt   of  lt center gt  will also positioned to center inline-block element can have different size  comapred to display block setting  according to browser defaults

User · Answer

body  html       display  table      height  100       width  100      container       display  table-cell      vertical-align  middle     container  box       width  100px      height  100px      background  red      margin  0 auto      http   jsfiddle net NPV2E    width 100   for the  body  tag is only for an example  In a real project you may remove this property

User · Answer

In my case  the phone screen size is unknown  and here is what I did   HTML   lt div class  loadingImg  gt  lt  div gt    CSS   loadingImg      position  fixed      top  0px      left  0px      z-index  9999999      border  0      background  url     images loading gif   no-repeat center      background-size  50px 50px      display  block      margin  0 auto      -webkit-border-radius  50px      border-radius  50px      JavaScript  before you need to show this DIV       loadingImg   css  height    document  height         loadingImg   css  width    document  width         loadingImg   show

User · Answer

Simply use the center tag just after the body tag  and end the center tag just before body ends    lt body gt       lt center gt              Your code here          lt  center gt   lt  body gt    This worked for me with all the browsers I have tried

User · Answer

position  absolute and then top 50  and left 50  places the top edge at the vertical center of the screen  and the left edge at the horizontal center  then by adding margin-top to the negative of the height of the div  i e   -100 shifts it above by 100 and similarly for margin-left  This gets the div exactly in the center of the page    x000D   x000D   outPopUp   x000D    position  absolute  x000D    width  300px  x000D    height  200px  x000D    z-index  15  x000D    top  50   x000D    left  50   x000D    margin  -100px 0 0 -150px  x000D    background  red  x000D    x000D   lt div id  outPopUp  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Some other pre-existing setups from older code that will prevent div page centering L amp R are    Other classes hidden in external stylesheet links  Other classes embedded in something like an img  like for older external CSS print format controls   Legend code with IDs and or CLASSES will conflict with a named div class

User · Answer

To make it also work correctly in Internet Explorer 6 you have to do it as follows   HTML   lt body gt       lt div class  centered  gt          centered content      lt  div gt   lt  body gt    CSS  body       margin  0      padding  0      text-align  center                centered       margin  0 auto      text-align  left      width  800px

User · Answer

Use justify-content and align-items to horizontally and vertically align a div  https   developer mozilla org de docs Web CSS justify-content https   developer mozilla org en docs Web CSS align-items   x000D   x000D  html  x000D  body  x000D   container   x000D    height  100   x000D    width  100   x000D    x000D   container   x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    x000D   mydiv   x000D    width  80px  x000D    x000D   lt div class  container  gt  x000D     lt div class  mydiv  gt h  amp  v aligned lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you have some regular content  and not only one line of text  the only possible reason I know is to calculate margin   Here is an example   HTML   lt div id  supercontainer  gt     lt div id  middlecontainer  gt       lt div class  common  id  first  gt first lt  div gt       lt div id  container  gt         lt div class  common  id  second  gt second lt  div gt         lt div class  common  id  third  gt third lt  div gt       lt  div gt     lt  div gt   lt  div gt    CSS  body     margin  0    padding  0      common     border  1px solid black      supercontainer     width  1200px    background  aqua    float  left      middlecontainer     float  left    width  104px    margin  0 549px      container     float  left      first     background  red    height  102px    width  50px    float  left      second     background  green    height  50px    width  50px      third     background  yellow    height  50px    width  50px      So   supercontainer is your  whole page  and its width is 1200px    middlecontainer is div with content of your site  it s width 102px  In case the width of content is known  you need to divide the page s size to 2  and subtract half of content s width from the result  1200   2 -  102   2    549   Yes  I m also seeing that this is der grosse fail of CSS

User · Answer

lt div gt  lt  div gt      div     display  table    margin-right  auto    margin-left  auto

User · Answer

This can be easily achieved via flex container    container   width  100    display  flex   height  100vh   justify-content  center      item   align-self  center      Preview Link

User · Answer

Get the width of the screen  Then make margin left 25  Make margin right 25    In this way the content of your container will sit in the middle   Example  suppose that container width   800px    lt div class  container  width  device-width  id  updatedContent  gt       lt p id  myContent  gt  lt  p gt       lt contents gt  lt  contents gt       lt contents gt  lt  contents gt   lt  div gt   if      myContent   parent        updatedContent              myContent   css            left    - device-width 0 25 px            right    - device-width 0 225 px

User · Answer

Add this class to the div you want centered  which should have a set width     marginAutoLR       margin-right auto      margin-left auto      Or  add the margin stuff to your div class  like this    divClass       width 300px      margin-right auto      margin-left auto

[css] How to align a <div> to the middle (horizontally/width) of the page

Examples related to css

Examples related to html

Examples related to alignment

Examples related to center