Center Align on a Absolutely Positioned Div

Question

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

The div is at the top, but I can't center it with <center> or margin: 0 auto;

score 154 · Accepted Answer · edited Mar 24 '17 at 16:54

154

Your problem may be solved if you give your div a fixed width, as follows:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

edited Mar 24 '17 at 16:54

Hakan Fıstık

16,800
14
110
131

answered Oct 31 '08 at 08:27

JacobE

8,021
7
40
48

1

I don't know why I didn't think of that, even though we use the same technique for vertical centering all the time... Thanks anyway, you saved me a lot of time. – Aayush Aug 31 '10 at 10:19
1

what if the user has vertically scrolled down the div appears on the top of page while it should appear on the visible area – PUG Aug 26 '12 at 17:45
I am displaying thumbnails of dynamically reszied images in my overlay div, so I don't know the width. – PUG Sep 01 '12 at 04:13
4

this is only a workaround, http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div appears to be the solution – PUG Sep 01 '12 at 05:00
1

This is not right answer. Different media type will not support this snippet. – Sushan Oct 28 '14 at 07:59
Set width and margin-left in percentage to make it responsive. `width: 80%; margin-left: -40%` – Mihir May 13 '16 at 10:07
Note that this works because you move the div to "start" from the center by 'Left: 50%;' and then u adjust to the left by using margin-left that amounts to half of your actual width. Genius, I would say. – iWillGetBetter Sep 30 '16 at 10:31
it you are using a fixed width, this is the best solution. – Shafeeque Feb 04 '19 at 10:27

score 100 · Answer 2 · answered Dec 10 '12 at 17:45

100

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

answered Dec 10 '12 at 17:45

Matheus Oliveira

1,017
1
7
2

4

How does this work? Can you please provide why your answer is valid? – afuzzyllama Dec 10 '12 at 18:08
1

I really like this method over others 99% of the time, you don't have to deal with padding, borders, etc. I've never seen this fail, next time provide an example if it fails for you. – Dan Nov 11 '13 at 18:47
1

Cool thing about this solution is that it works with percents too, just not sure if it's cross-browser compatible – maljukan Feb 02 '14 at 16:47
1

Wow. I was not expecting this to work but it worked for me like a charm – Jul 25 '14 at 12:06
Add in `bottom:0;` and you can centre the footer of the page...exactly was I was looking for, thanks. – zaxvo Aug 21 '14 at 21:16
if you remove the position, right and left property, the div element will basically in the centered. The thing is that you can't use margin:auto if you start adjusting the position of the element. But reading the question, I don't understand whe he need to position the element as absolute. – Janzell Jurilla Jan 27 '15 at 06:03
1

@dav: "[setting the value for left/right] specifies how far a box's (…) margin edge is offset to the (…) edge of the box's containing block." http://www.w3.org/TR/CSS2/visuren.html#position-props – Herr_Schwabullek Apr 08 '15 at 11:55
1

The beauty of this one is that you don't need to know the width. – MarcGuay Jun 29 '15 at 21:31
4

I agree that this should be the correct answer, a -200px margin screams hack to me. – Mani5556 Jul 28 '15 at 18:48
1

This works way better than the selected answer, as it is much more versatile. – Barry Dec 07 '15 at 20:20
Agree, this is much better, however I did use margin: 0 auto 0 auto; though. But good soln. – joy Jul 14 '16 at 22:21
This is the (Best Answer) – Mahdi Jazini Nov 07 '16 at 13:45
The trick is setting both `left: 0;` and `right: 0;` anchors, then it can look like `horizontal-center` alignment (I was searching for something similar for `react-native`, and using `top: 0; bottom: 0;', I was able to `stretch` the component, and made it look like `vertical-center` alignment using `justifyContent: 'center'`) – Top-Master Jun 09 '19 at 05:25

score 40 · Answer 3 · edited Mar 24 '17 at 16:54

40

I know I'm late to the party, but I thought I would provide an answer here for people who need to horizontally position an absolute item, when you don't know its exact width.

Try this:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

The same technique can also be applied, for when you might need vertical alignment, simply by adjusting the properties like so:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

edited Mar 24 '17 at 16:54

Hakan Fıstık

16,800
14
110
131

answered Aug 16 '16 at 10:56

Michael Giovanni Pumo

14,338
18
91
140

1

Whaaat. This is awesome! Could you explain how it works? Edit: Did some hunting and it seems like the left: 50% moves the div's left location to the center, which isn't really center. But the translateX shifts it back 50% of the **content's width** – azizj Nov 10 '16 at 12:20
2

The absolute positioning will position from the top left of an item. Using translate will shift it to the amount relative to its size. – Michael Giovanni Pumo Nov 15 '16 at 13:19
3

Michael, just wanted you to know, you weren't late to the party bud...and for those who dont know: transform: translate(-50%, -50%); does both the vertical and horizontal centering with 1 line – Marvel Moe Jan 09 '17 at 07:22

score 6 · Answer 4 · answered Jul 06 '19 at 15:51

6

To center it both vertically and horizontally do this:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

answered Jul 06 '19 at 15:51

Armin

2,021
2
19
17

score 1 · Answer 5 · answered Apr 21 '20 at 09:41

1

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

answered Apr 21 '20 at 09:41

panwar

973
9
13

score 0 · Answer 6 · answered Jul 11 '16 at 19:40

I was having the same issue, and my limitation was that i cannot have a predefined width. If your element does not have a fixed width, then try this

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

then modify your html to look like this

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

score 0 · Answer 7 · answered Oct 29 '19 at 17:20

0

Or you can use relative units, e.g.

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

answered Oct 29 '19 at 17:20

Aliaksei

1,094
11
20

dalvallana · Answer 8 · 2016-06-21T11:40:49.570

-1

If it is necessary for you to have a relative width (in percentage), you could wrap your div in a absolute positioned one:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Remember that in order to position an element absolutely, the parent element must be positioned relatively.

edited Jun 21 '16 at 11:40

answered Jun 20 '16 at 12:04

dalvallana

469
6
13

score -22 · Answer 9 · answered Jan 15 '09 at 15:14

-22

Yes:

div#thing { text-align:center; }

answered Jan 15 '09 at 15:14

5

This will align the contents within a div. It will not align the div in the center of the page. It will also not align an absolutely positioned div in any way other than the contents within it that are part of the document flow. – CarterMan Apr 12 '13 at 19:58

Center Align on a Absolutely Positioned Div

9 Answers9

Linked

Related