how to make div center horizontally with fixed position? [duplicate]
I think there is no need to explain my css code, it is almost self-explanatory, but the div is not center horizontally, is there any way to make this? Thanks in advance.
4 Answers 4
The point to be noted here is, the negative margin-left of exactly half value of width and set the left 50 % of the body
your answer and @gregbenner’s are both use this ‘trick’, first of all, thank you. I also just searched google and others also use this way, I am wondering if there is a no trick way to do it?
This is actually a nice solution. But it is not exactly what he wants to do. This way the footer will become responsive and won’t have it’s fixed width of 500px.
ya @Nick, but I have also mentioned that the trick behind it. (s)he can easily change the dimensions as (s)he likes.
@Sachin yep, you are right. There is probably no other way than using a trick like this or a container DIV.
This should work well for you. It works by adding a container div.
#footer-container < position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; >#footer hello world the «text-align:center;» will cause the text to center and IE6 to work. if you don’t want to center, but like IE6 to work. add text-align:left to the #footer div.
Put another div inside it with relative position, margin: auto. Give the fixed one 100% width.
Otherwise you can hack it with negative margin ‘trick’
If you’re working with modern browsers you can use the flexbox layout module: http://caniuse.com/#feat=flexbox.
Flexbox documentation: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Note: Can’t post more than two links due to my rep.
(Using a footer tag instead of a div#footer as it’s simpler.)
justify-content: center; ‘centers’ #footer-container ‘s children, which is just the footer element in this case.
This is very similar to Nick N.’s solution, except that you don’t have to reset the text-align property on the footer, and that this is probably the non-‘trick’ way that you wanted.
The accepted solution is slightly off because the footer’s width in that case is variable (80%) instead of at 500px.
To other readers, if your parent is a form element, and the child is an input element, use flex: 1; on the input (child) element, and use max-width: 500px; instead of width: 500px; . Using flex: 1; should make the input element expand to fill the form element’s width, which it might not otherwise do.
Center fixed div with dynamic width (CSS)
Now, how can i make this div centered? I can use margin-left: -450px; left: 50%; but this will only work when the screen is > 900 pixels. After that (when the window is < 900 pixels), it will no longer be centered. I can of course do this with some kind of js, but is there a "more correct" of doing this with CSS?
@Liam — I disagree, I think this question is an outright on its own. Those questions don’t answer this one in regards to having a div of no fixed width centred.
@Liam — Further to that, you can’t use a margin: 0 auto on a position: fixed div. Did you even read the question?
5 Answers 5
You can center a fixed or absolute positioned element setting right and left to 0 , and then margin-left & margin-right to auto as if you were centering a static positioned element.
See this example working on this fiddle.
Just to mention. It’s not that unexpected, but it fails in IE7. It’s positioned 0px from left here. It does how ever work perfect in IE 8.
This doesn’t work when the width of the element is greater than the width of the screen.. would be nice to have it work in that situation.
@andrewb you could apply an equally negative margin both on right and left of at least a value >= witdth / 2 , as seen on jsfiddle.net/PvfFy/168, but is non an elegant approach IMHO. I have tested it on chrome for fun, I don’t know if it will work on the rest
Outside the scope of the question, this depends on setting the element’s width, so it’s not great if you have dynamic content whose width is varying or unknown. Leaving centering aside, I’d normally do that with display: inline-block and no set width. Does anyone have a no-js solution for that case?
Here’s another method if you can safely use CSS3’s transform property:
. or if you want both horizontal AND vertical centering:
As long as it’s for a modern browser, this is the BEST solution on this answer! The only one that is like a true `float: center’, in that you can click around wrapping element and not be stuck having to fish ways around it. Love this answer!
Careful, do not use translation in percentage to center text as it will be smoothed if the resulting value is a float. Ho boy, you don’t want that, no you don’t.
Using CSS transforms can cause smoothing to occur on more than just text; I’m getting funky borders as a result of the transformation.
Potential to contract early when changing screen size (depending on the size of the division), resulting in large boarders around the edge of the division.
This works regardless of the size of its contents
for me also not anymore, maybe it was a bug. but I remember clearly that the whole container became blurred after this, if only slightly. let’s delete this discussion?
You’d need to wrap it in a container. here’s the css
#container < position: fixed; top: 100px; width: 100%; text-align: center; >#some_kind_of_popup
Ah, i like your thinking. The fixed div will only be a container for another div with the actual result? I’ll try this one!
@MathewBerg, good point about ie6/7. In that case your answer should work best. This is a little OT, but personally i think developers should’nt spend time fixing stuff for
Yes, but unfortunately some companies require support for legacy browsers no matter how far into the future we get. Go ahead and accept either mine or laconbass’ answer depending on your needs.
css vertically centering a fixed positioning div
To have the image always in the horizontal center, I am simply using text-align:center on the wrapper div, so I am 100% sure it will be correct. I am facing problems with the vertical centering and I am using a workaround of simply setting the top value in the #lightbox properties. As you can see the height of the image is known, so it is easily doable in jQuery but I am looking for a pure CSS solution. Any ideas? Thanks.
8 Answers 8
The best solution I’ve seen for both vertically and horizontally centering a position: fixed div is:
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); Fiddle and source. You don’t need to know the dimensions of the div and it doesn’t require any container div s. The centered div ‘s width can even be a percentage (which was what I was looking for when I found this solution).
If the element you are centering contains text, this will cause the text to become blurry since the use of translate activates 3d hardware acceleration.
Alternatively, you could try this (only works if you know the height of the image):
use ‘transform: translateY(-50%);’ and drop the ‘margin-top: -300px’ to get this to work for any height
Here are couple SASS mixins I’m using. I hope this is going to help someone:
// vertically centers as relative @mixin vertical-align < position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); >// vertically centers the element as absolute @mixin vertical-center < position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); >// horizontally centers the element as absolute @mixin horizontal-center < position: absolute; left: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); >// absolutely centers the element inside of its first non-static parent @mixin absolute-center
This should be the correct answer as it doesn’t rely on the height of the element. By using transform: translateY(-50%) this works regardless of height
Use a combo of CSS3’s viewport units and calc( ) to center a lightbox without the risk of blurring text due to hardware acceleration. This solution is also responsive. Convert the formula margin-top = -height / 2 from fixed units to viewport units
/* Overlay */ body::after < position: fixed; z-index: 19000; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ' '; opacity: .2; background-color: #000; >/* Lightbox */ .lightbox < position: fixed; z-index: 15; top: 50%; width: 90vw; height: 90vh; margin: 0 5vw; margin-top: calc(-90vh / 2 ); >More information on relative length units and calc( ):
Detailed Example
body < margin: 0; >/* The Overlay */ body::after < position: fixed; z-index: 14; top: 0; left: 0; display: block; width: 100%; height: 100%; content:' '; opacity: .5; background-color: #000; >/* The Lightbox */ .lightbox < position: fixed; z-index: 15; top: 50%; width: 60vw; height: 60vh; margin: 0 20vw; margin-top: calc(-60vh / 2); background:#fff; border: 1px solid white; border-radius: 5px; overflow:hidden; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); >/* Bonus: responsive and centered image */ .lightbox h1 < box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); position: relative; padding-left: 1em; font-family: sans-serif; color: #E2E8F2; >.highlight < color: #4E2622; >.lightbox img
Sono Neko その猫
Leave dead animals as gifts
Meowwww missing until dinner time
Cat ipsum dolor sit amet, vommit food and eat it again. Find something else more interesting favor packaging over toy yet hide at bottom of staircase to trip human or intently stare at the same spot, but poop in litter box, scratch the walls attack feet ears back wide eyed. Scratch leg; meow for can opener to feed me. Where is my slave? i'm getting hungry purr for no reason or eat a plant, kill a hand eat a plant, kill a hand. Where is my slave? i'm getting hungry jump around on couch, meow constantly until given food, , so chase dog then run away yet stick butt in face, for poop on grasses for rub face on owner, under the bed. Brown cats with pink ears meow destroy the blinds why must they do that, and see owner, run in terror. Meowing non stop for food play time, yet stand in front of the computer screen get video posted to internet for chasing red dot poop in litter box, scratch the walls. Destroy couch leave dead animals as gifts why must they do that, for find something else more interesting hopped up on catnip sleep in the bathroom sink. Kitty power! pooping rainbow while flying in a toasted bread costume in space eat grass, throw it back up and spread kitty litter all over house. I like big cats and i can not lie. Under the bed brown cats with pink ears loves cheeseburgers has closed eyes but still sees you yet chase red laser dot. Claw drapes drink water out of the faucet and behind the couch refuse to leave cardboard box but hunt anything that moves. Rub face on owner favor packaging over toy yet play time. Hide when guests come over love to play with owner's hair tie. Purr for no reason make meme, make cute face eat a plant, kill a hand all of a sudden cat goes crazy, or stare at the wall, play with food and get confused by dust for hate dog love to play with owner's hair tie. Sleep on keyboard eat grass, throw it back up but hopped up on catnip make meme, make cute face. Pooping rainbow while flying in a toasted bread costume in space. Chase imaginary bugs destroy the blinds claws in your leg for hack up furballs. I am the best chase laser but i am the best yet meow all night having their mate disturbing sleeping humans and hunt by meowing loudly at 5am next to human slave food dispenser. Destroy the blinds. Eat a plant, kill a hand run in circles, and chew iPad power cord, and rub face on everything, and sit in box mark territory, so ignore the squirrels, you'll never catch them anyway. Present belly, scratch hand when stroked nap all day, and spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce destroy couch, but put toy mouse in food bowl run out of litter box at full speed .
CSS: How to Center an Element with Fixed Position
There might be cases where you want to center an element whose position is fixed (e.g., you need to implement a modal dialog or a floating button, etc).
1. If you need to center the fixed element both horizontally and vertically, set the top, left, and transform properties as follows:
top: 50%; left: 50%; transform: translate(-50%, -50%);2. In case you only need to center the fixed element horizontally, use this:
left: 50%; transform: translateX(-50%);3. And here is how to center the fixed element vertically:
top: 50%; transform: translateY(-50%);The three examples below will cover all of these use cases.
Sample Dialog