251

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;
}
2
  • 1
    @LoganMzz it is not because this question has its width known.
    – Davbog
    Commented Jul 6, 2019 at 0:05
  • @Davbog Not really. What is known is a min and a max, but the actual width at any time is not known.
    – TylerH
    Commented Nov 28, 2023 at 20:38

9 Answers 9

530

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.

You could use media queries to specify a minimum margin, and then transition to auto for larger screen sizes.


.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}
<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

13
  • 57
    Note: width is a must ! Commented Apr 1, 2014 at 2:09
  • 2
    Yep. This is correct... using a "text-align: center;" and a "left: 0; right: 0;" will allow you to absolute position a div while keeping it horizontally centered. Commented Sep 29, 2014 at 19:32
  • 3
    @AlexG I just loaded the fiddle in IE11 and it works. Can you clarify? Commented Apr 4, 2015 at 19:56
  • 1
    @AlexG it does work in IE11, however it won't work if you don't declare a width. I had the same problem. You have to use a width as shown in the example. Commented Jul 18, 2015 at 4:29
  • 4
    also needed margin: auto for it to work in our case
    – Crashalot
    Commented Sep 5, 2015 at 23:58
186

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%);
}
2
  • 3
    At this point in time, there would also still need to be a rule with a -webkit- prefix for it to work in Safari.
    – Shikkediel
    Commented Mar 5, 2015 at 7:56
  • Unfortunately it somehow applies the transparency of the surrounding div also to the text inside..
    – dnl.re
    Commented Jul 31, 2017 at 16:26
26

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;

You can also use other values for width like max-content,fit-content etc if you don't want to set a value with units

Demo:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }
<div class="centeredBox">Centered Box</div>

1
  • 1
    This worked perfect for absolute images in a row of bootstrap columns
    – ZachNag
    Commented Mar 31, 2016 at 20:42
12
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
1
  • this solution doesn't seem to work on all browsers
    – Sara Kat
    Commented Jun 29, 2022 at 16:08
6

Flexbox? You can use flexbox.

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}
<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

4
  • This actually worked beautifully for my unique case. left: 0; right: 0; extended to 100%, which was not an option as child element had a background color, and left: 50%; transform: translateY(-50%); didn't work because that constrained the child to 50% width. This was the only solution that preserved flexible dimensions of the child (only limited to browser support). Thanks!
    – Ben Dyer
    Commented Sep 13, 2016 at 18:43
  • The question specified absolute positioned. Commented Aug 14, 2023 at 22:20
  • how would position: absolute display differently compared to justify-content: center in a display: flex? Commented Aug 15, 2023 at 17:32
  • @DavidSpector This works for me using absolute positioning. I just had to add width: 100% Commented Oct 24, 2023 at 13:08
1

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

1
  • I think this stretches the div to fit the viewport. Did you try it? Commented Aug 14, 2023 at 22:21
0

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

0

Both center vertically and horizontally use left:50%;top:50%; transform: translate(-50%, -50%);

.centeredBox {
    margin: 0 auto;
    left: 50%;
    top:50%;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
    text-align: center;
    padding:10px;
    transform: translate(-50%, -50%);
   
   }
<div class="centeredBox">Centered Box</div>

-1

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;
    }

}

Not the answer you're looking for? Browse other questions tagged or ask your own question.