Centering a position:fixed div
I have been trying for days to center a position:fixed element, a lot of solutions all around the web have been found and yet, either due to inefficiency or my own inexperience, none of them worked. The scenario is as follows; I want to make an image visor, whenever you click a image a fixed div is made visible, holding said image, this is actually done via JavaScript. The problem occurs when I want to center the div, no matter which resolution you are using.
#galleryimage < position:fixed; z-index:200; display:none; max-height: 100%; max-width: 100%; >#galleryimage img
The images’ width and height are unknown variables, I am not experienced enough with JS to handle it, so I wanted to do it with pure CSS. However, I never could get it centered. Margin just won’t work, and the formula with negative margin won’t either, as I do not know the width and height variables of these images. Any solution?
2 Answers 2
I would use JavaScript + jQuery for this, to make life easier. Here’s a good starting point for you:
#galleryimage < position:fixed; z-index:200; height: 100%; width: 100%; opacity: 0; >#galleryimage img ![]()
This uses a few techniques. In CSS the image is absolutely positioned and placed at the 50% point for both top and bottom. Then, using jQuery, once we know the image is loaded, we can determine its width and height, and shove it left and up by half those values. That places it directly in the center of the screen. I added some animation stuff in there for prettiness 🙂
Center aligning a fixed position div
. where the value for margin-left is half the width of the div. This doesn’t seem to work for fixed position divs, instead it just places them with their left-most corner at 50% and ignores the margin-left declaration. Any ideas of how to fix this so I can center align fixed positioned elements? And I’ll throw in a bonus M&M if you can tell me a better way to center align absolutely positioned elements than the way I’ve outlined above.
16 Answers 16
Koen’s answer doesn’t exactly center the element.
The proper way is to use CSS3 transform property, although it’s not supported in some old browsers. We don’t even need to set a fixed or relative width .
I'm almost centered DIV lorem ipmsum I'm exactly centered DIV using CSS3 thats perfect. I used this for a cordova application & its expected to run in major updated browsers 🙂
Wow — thanks! I’ve been trying to center text between two uneven divs and this is the only one that works without destroying the markup!
@Alex left: 50% moves the div to the 50% of the page. But you have to keep in mind that it moves it starting from the left side of the div, therefore the div is not centered yet. translate(-50%, 0) which is basically translateX(-50%) considers the current width of the div and moves it by -50% of its width to the left side from the actual place.
For the ones having this same problem, but with a responsive design, you can also use:
width: 75%; position: fixed; left: 50%; margin-left: -37.5%; Doing this will always keep your fixed div centered on the screen, even with a responsive design.
You could use flexbox for this as well.
I’ve altered my answer by removing the mention to
From the post above, I think the best way is
- Have a fixed div with width: 100%
- Inside the div, make a new static div with margin-left: auto and margin-right: auto , or for table make it align=»center» .
- Tadaaaah, you have centered your fixed div now
This is also the only way I know of to allow max-width s for fixed-position elements. You want a fixed sidebar that responsively takes 30% of your max-width: 1200px web page? This will get you there.
display: fixed; top: 0; left: 0; transform: translate(calc(50vw - 50%)); Center it horizontally and vertically (if its height is same as width):
display: fixed; top: 0; left: 0; transform: translate(calc(50vw - 50%), calc(50vh - 50%)); No side effect: It will not limit element’s width when using margins in flexbox
This is better than using left: 50%; transform: translate(-50%, 0); , as it avoid showing of a horizontal scrollbar when 50% of centered widget > 50vw on Firefox.
Normal divs should use margin-left: auto and margin-right: auto , but that doesn’t work for fixed divs. The way around this is similar to Andrew’s answer, but doesn’t use the deprecated thing. Basically, just give the fixed div a wrapper.
This will center a fixed div within a div while allowing the div to react with the browser. i.e. The div will be centered if there’s enough space, but will collide with the edge of the browser if there isn’t; similar to how a regular centered div reacts.
If you want to center aligning a fixed position div both vertically and horizontally use this
position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); If you know the width is 400px this would be the easiest way to do it I guess.
The conventional approach of .center < position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); >tries to keep some empty space around the centered element which often causes the centered element’s width to not be ideal like being smaller than what it should be.
@proseosoc’s answer works well in that scenario and extends the centered element’s reach to the end of the viewport sides. The centered element, however, gets centered to the entire viewport including the scrollbar. But if your use case requires centering elements within space without the scrollbar, you can use this modified answer. This approach is also similar to the aforementioned conventional approach which centers elements in space without the scrollbar.
Center horizontally
Center vertically
Center horizontally and vertically
CSS: Centering position: fixed
The problem with the above is that, at least on Firefox, the element is stretched from top to bottom (which can be useful) if no height is specified, or it stays at the top if the height is specified. margin: auto only works horizontally.
@Manngo try it first, take a look at this one jsfiddle.net/brt2ngz6 it will center if you add a height.
@winresh24 No, you’re right. My own test failed because I was battling against other CSS for the margin . That’s two surprises: margin: auto normally doesn’t work vertically, and I still don’t see how setting opposite positions to 0 achieves the effect. Where is this documented? Once I find out, I can see which browsers support this behaviour. Thanks for the fiddle.
@Manngo As far as I know it’s support all the browser. I can’t remember where it was documented. You can accept the answer though if this one fixed your issue. Cheers
@Manngo — It’s documented in the CSS 2.x spec. In particular, see the equaity ‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = height of containing block . Note that this is describing absolute positioned elements. But fixed positioning is a subcategory of absolute positioning
The element is centered horizontally because of this line (Margin:0 auto).
The 0 defines top and bottom margin. Auto = auto margin for left and right. This is the key of making the element to stay center.
Vertically is different because the way other elements can be place on top and below the element.
Yes, but that normally doesn’t work if the position is fixed . My question relates to fixed elements.
OK, I think I have an answer, thanks to Smashing Magazine: Absolute Horizontal and Vertical Centering in CSS. Here is the brief version:
- position: fixed or position: absolute removes the element from the normal flow, and the element gets its bearings from its container or the body.
- top:0 , bottom: 0 , right: 0 and left: 0 effectively stretch the element to its container. For absolute & fixed position, they also define a bounding box..
- setting the height and width restricts the size of the box, so it isn’t stretched, but:
- The margin is calculated from the bounding box above. In particular, margin: auto causes the centering.
It appears that while a vertical margin: auto has no effect on normal elements (they are set to 0), they apply to fixed and absolute elements.
Note that the explanation above includes fixed positioning, which the article doesn’t focus on.
Thanks also to @winresh24 who pointed out the vertical centering. That help me to track down the solution.
Center a position:fixed element
I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed; , it’s even not centering horizontally. Here’s the complete set:
This should be inside a horizontally and vertically centered box. 24 Answers 24
If your div has a known width and height, then you basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div’s height and width to shift the center towards the middle of the div.
position: fixed; width: 500px; height: 200px; top: 50%; left: 50%; margin-top: -100px; /* Negative half of height. */ margin-left: -250px; /* Negative half of width. */ Or, if your div has a dynamic/undefined width and/or height, then instead of the margin , set the transform to the negative half of the div’s relative width and height.
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); Or, if your div has at least a fixed width and you don’t really care about centering vertically, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto , so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:
position: fixed; width: 500px; margin: 5% auto; /* Only centers horizontally not vertically! */ left: 0; right: 0;