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

Possible duplicate of [How to center absolutely positioned element in div?](https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div) — LoganMzz, Jun 09 '17 at 10:46
@LoganMzz it is not because this question has its width known. — Davbog, Jul 06 '19 at 00:05

thgaskell · Accepted Answer · 2019-07-06T22:39:47.667

437

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.

.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>

edited Jul 06 '19 at 22:39

answered Jul 31 '13 at 17:44

thgaskell

11,608
5
30
36

45

Note: **`width`** is a must ! – Ijas Ameenudeen Apr 01 '14 at 02: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. – Sterling Bourne Sep 29 '14 at 19:32
3

@AlexG I just loaded the fiddle in IE11 and it works. Can you clarify? – Brian Webster Apr 04 '15 at 19:56
Chrome and Firefox also allow and respect values other than 0 for left and right, but IE only plays ball using 0. – Matijs Apr 23 '15 at 18:11
Thank you so much. you saved my time ! – seoyoochan Jul 14 '15 at 09:08
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. – Panama Jack Jul 18 '15 at 04:29
2

also needed `margin: auto` for it to work in our case – Crashalot Sep 05 '15 at 23:58
This solution only works if the width is defined. To me, this is a huge drawback as a lot of element's sizes are dependent on their content. – Ian S Oct 15 '15 at 09:51
To be fair, this answer wasn't meant to be taken as a best approach. It answered the original question which was about `margin: 0 auto` not working on absolutely positioned elements. :) – thgaskell Oct 18 '15 at 22:56
This is by far one of the best solutions there is. Thank you very much @thgaskell you solved a lot of problems for me lol – Rezwan Azfar Haleem Jul 02 '16 at 21:54
See also http://stackoverflow.com/q/29261595/292060 for a good explanation of why this works. – goodeye Dec 03 '16 at 02:35
Just wanted to add that the reason this works is precisely because of margin auto. More specifically, to quote the CSS2.1 spec: "If none of the three [width, left, right] are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values.". In other words, margin left/right becomes equal and takes up all remaining space in containing block. Spec link: https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#abs-non-replaced-height – Magnus Sep 21 '18 at 18:26
`margin: 0 auto; text-align: center;` – Jacksonkr Mar 07 '20 at 16:11

score 133 · Answer 2 · edited Apr 13 '15 at 04:02

133

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

edited Apr 13 '15 at 04:02

aug

9,482
6
63
84

answered Nov 19 '14 at 19:42

Adel

3,436
2
16
27

That would probably depend on his project's requirements. – Kris Selbekk Nov 25 '14 at 08:35
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 Mar 05 '15 at 07:56
Unfortunately it somehow applies the transparency of the surrounding div also to the text inside.. – dnl.re Jul 31 '17 at 16:26
1

This is definitely the answer. For me, having width set specifically is an absolute no go. – Mike Mar 10 '20 at 17:48

Metabolic · Answer 3 · 2017-02-27T03:53:46.127

14

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:

.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>

edited Feb 27 '17 at 03:53

answered Feb 05 '16 at 07:14

Metabolic

2,191
3
22
38

1

This worked perfect for absolute images in a row of bootstrap columns – ZachNag Mar 31 '16 at 20:42

score 5 · Answer 4 · answered Jun 16 '16 at 02:39

5

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>

answered Jun 16 '16 at 02:39

Ronnie Royston

11,959
5
57
72

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 Sep 13 '16 at 18:43

score 4 · Answer 5 · answered Jun 16 '16 at 01:44

4

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

answered Jun 16 '16 at 01:44

Z. Rahman Raju

605
5
4

score 2 · Answer 6 · answered Oct 26 '16 at 14:47

2

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

answered Oct 26 '16 at 14:47

Neko

21
1

score 0 · Answer 7 · edited Jul 31 '18 at 18:39

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

edited Jul 31 '18 at 18:39

ivcubr

1,598
9
16
23

answered Jul 31 '18 at 16:52

Amit Kumar

1
2

An One · Answer 8 · 2020-12-23T10:06:27.280

0

Centering div with position: absolute and width: unknown:

HTML:

<div class="center">
  <span></span>

  <div>
    content...
  </div>

</div>

CSS:

.center{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto auto;
  overflow: auto;
}

edited Dec 23 '20 at 10:06

answered Dec 23 '20 at 08:30

An One

1
1

Leonard Pauli · Answer 9 · 2013-07-31T17:39:46.397

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

}

How to center absolute div horizontally using CSS?

9 Answers9

Linked

Related