How to center absolute div horizontally using CSS

Question

I ve a div and want it to be centered horizontally - although I m giving it margin 0 auto  it s not centered      container       position  absolute      top  15px      z-index  2      width 40       max-width  960px      min-width  600px      height  60px      overflow  hidden      background   fff       margin 0 auto

User · Answer

Here is a link please use this to make the div in the center if position is absolute.

HTML:

<div class="bar"></div>

CSS:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

Example jsfiddle

User · Answer

Centering div with position  absolute and width  unknown  HTML   lt div class  quot center quot  gt     lt span gt  lt  span gt      lt div gt      content       lt  div gt    lt  div gt   CSS   center    position  absolute    top  0    left  0    right  0    bottom  0    display  grid    grid-template-columns  auto auto    overflow  auto

User · Answer

Although above answers are correct but to make it simple for newbies  all you need to do is set margin  left and right  following code will do it provided that width is set and position is absolute   margin  0 auto  left  0  right  0    Demo    x000D   x000D   centeredBox   x000D      margin  0 auto  x000D      left  0  x000D      right  0  x000D      x000D      x000D         Position should be absolute    x000D      position  absolute  x000D          And box must have a width  any width    x000D      width  40   x000D      background   faebd7  x000D      x000D       x000D   lt div class  centeredBox  gt Centered Box lt  div gt  x000D   x000D   x000D

User · Answer

This doesn t work in IE8 but might be an option to consider  It is primarily useful if you do not want to specify a width    element     position  absolute    left  50     transform  translateX -50

User · Answer

You need to set left  0 and right  0   This specifies how far to offset the margin edges from the sides of the window      Like  top   but specifies how far a box s right margin edge is offset to the  left right  of the  right left  edge of the box s containing block    Source  http   www w3 org TR CSS2 visuren html position-props     Note  The element must have a width smaller than the window or else it will take up the entire width of the window       If you could use media queries to specify a minimum margin  and then transition to auto for larger screen sizes        x000D   x000D   container   x000D    left 0  x000D    right 0  x000D   x000D    margin-left  auto  x000D    margin-right  auto  x000D   x000D    position  absolute  x000D    width  40   x000D   x000D    outline  1px solid black  x000D    background  white  x000D    x000D   lt div class  container  gt  x000D    Donec ullamcorper nulla non metus auctor fringilla  x000D    Maecenas faucibus mollis interdum  x000D    Sed posuere consectetur est at lobortis  x000D    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor  x000D    Sed posuere consectetur est at lobortis  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

so easy  only use margin and left  right properties    elements    position  absolute   margin-left  auto   margin-right  auto   left  0   right  0      You can see more in this tip    How to set div element to center in html- Obinb blog

User · Answer

centerDiv       position  absolute      left  0      right  0      margin  0 auto      text-align center

User · Answer

Flexbox   You can use flexbox    x000D   x000D   box   x000D    display  -ms-flexbox  x000D    display  -webkit-flex  x000D    display  flex  x000D     x000D    -webkit-justify-content  center  x000D    justify-content  center  x000D   x000D    x000D   x000D   box div   x000D    border 1px solid grey  x000D    flex  0 1 auto  x000D    align-self  auto  x000D    background  grey  x000D    x000D   lt div class  box  gt  x000D     lt div class  A  gt I m horizontally centered  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can t use margin auto  on position absolute  elements  just remove it if you don t need it  however  if you do  you could use left 30     100 -40   2  and media queries for the max and min values    container       position  absolute      top  15px      left  30       z-index  2      width 40       height  60px      overflow  hidden      background   fff      media all and  min-width 960px          container           left  50           margin-left -480px          width  960px             media all and  max-width 600px          container           left  50           margin-left -300px          width  600px

[css] How to center absolute div horizontally using CSS?

Examples related to css

Examples related to html

Examples related to center

Examples related to absolute