Vertically and horizontally centred variable sized image enlargement (in div) using CSS and HTML only

Question

So for ages now I have been trying to achieve this. Basically my site allows admin to upload a thumbnail and enlargement image for each item in the catalogue. The thumbnail is displayed on the page the customer sees, and the enlargement is displayed on hover of the thumbnail.

I have no control over the size of the images being uploaded (I suppose I could restrict the width and height, but that wouldn't be practical in this situation).

I would like to both vertically and horizontally centre this image enlargement. It is contained in a div with position: fixed;. I believe (although I don't have the code in front of me at the moment) that I am currently using something like the following:

.image-enlargement
{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 400px;
    margin-left: -150px;
    margin-top: -200px;
}

I may have changed it to use jQuery - I can't remember though, it was that long ago when I last worked on this bit of the website. Now what I would like to do with the above code is to take out the width, height and margin specifications so as to allow an image, no matter how big or small, to be exactly centred, and without the use of JavaScript.

Has anyone ever achieved this before? If so, how? I am sure there must be some way to achieve this outcome, but have not come across a pure CSS / HTML solution.

Edit: JSFiddle at http://jsfiddle.net/Y7xAp/.

Just added a JSFiddle with my most recent attempt - obviously it doesn't work as the -50% margin is using the width / height of the container. It should be relatively easy to see what I am trying to do from that though. — ClarkeyBoy, Jan 27 '11 at 03:17
possible duplicate of [How to horizontal & vertical center a div?](http://stackoverflow.com/questions/4325643/how-to-horizontal-vertical-center-a-div) — Phrogz, Jan 27 '11 at 03:22
See also http://stackoverflow.com/questions/2726219/position-div-center-horizontal-and-vertical and http://stackoverflow.com/questions/2498552/horizontal-and-vertical-center-text-in-html and http://stackoverflow.com/questions/4416130/how-to-center-a-div-vertically and http://stackoverflow.com/questions/4460677/css-trick-for-centering-horizontal-and-vertical and ...etc. — Phrogz, Jan 27 '11 at 03:23
"See also stackoverflow.com/questions/2726219/… and stackoverflow.com/questions/2498552/… and stackoverflow.com/questions/4416130/… and stackoverflow.com/questions/4460677/… and ...etc." er yeah they were all **solved** using the exact method I am using now - but I do **NOT** want to use that method as it is not flexible when it comes to images of different sizes. Please reread the question, and could whoever voted this to be closed (if on the basis of these "duplicate" questions) please unvote it?? — ClarkeyBoy, Jan 27 '11 at 03:32

score 2 · Answer 1 · answered Jan 27 '11 at 03:42

2

Not sure how useful this would be in your situation, but a way around this is to display the picture as a background image. The code might look something like this:

#container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('myImage.jpg') center center no-repeat;
}

The browser will then properly calculate the position of the image to be centered vertically and horizontally. Then place an event on an onClick or something of the sort to detect when they want the image to disappear.

answered Jan 27 '11 at 03:42

Trevor Norris

20,499
4
26
28

Think this may work - I will try this out. I dynamically create the divs which contain the image so adding a `style="background: transparent url('bla') center center no-repeat"` in there should be simple. Thanks. Will mark as answer if it works. – ClarkeyBoy Jan 27 '11 at 03:49
The only way I see it not working is if an image is HUGE, like takes up the whole screen. But I know enough about VB.Net to be able to work out the dimensions of an image when it is uploaded - the action could then be prevented if over the maximum size. – ClarkeyBoy Jan 27 '11 at 03:50
Not sure if going this far would be worth it, but you could pass back the dimensions of the image to the client and if the calculated width/height of the browser window are smaller than the image, replace the fixed container with an img tag that sources the image. Then use css to set the width/height to auto-adjust with the browser window proportionally. If you'd like an example, I'll throw some quick code in a bin. – Trevor Norris Jan 27 '11 at 03:59
Not entirely sure what you mean - but then it is like 4am here! I have just been trying to alter it for this solution, but unfortunately I can't get a border to appear around it... should've realised that in the first place..! I suppose I could just stick with the solution I have now - or switch to jQuery (using a fade in or slide down effect would look kinda cool). I suppose jQuery can achieve much nicer effects than pure CSS / HTML... meh I'll sort this out later - need some kip.. Thanks for trying anyway. – ClarkeyBoy Jan 27 '11 at 04:05
No problem. Like you, I've never been completely happy with the usual proposed solutions. If you have any other questions let me know. – Trevor Norris Jan 27 '11 at 04:09

score 0 · Answer 2 · answered Jul 04 '16 at 18:32

The best way to center divs horizontally and vertically using CSS is through the flex-box.

Use display: flex on container and margin: auto on the inner element.

Remember: this is a good solution to new browsers and the container should have and height to display: flex works correctly. In this case I user the vh/vw unit (1/100 of viewport height/width).

Try using this:

.image-enlargement {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
}

.image-enlargement img {
    margin: auto;
}

To learn more about flex-box and vw/vh units read:

score 0 · Answer 3 · answered Jan 27 '11 at 03:01

0

If you could post your mark-up here then that would be great so that we can help you better. As for the size of the image element you can specify it's width and height so that whatever size the image the user will upload it will still be the same. You can do it like this, <img src="<image url>" height="100" width="100"/>

answered Jan 27 '11 at 03:01

mr.b

2,708
8
39
64

Thanks - what I failed to mention was that I have about 6 years experience of HTML / CSS and 2 1/2 years of VB.Net, so I am fairly experienced. I just have never found a way to do this and was interested to know if anyone else had. I have seen a lot of people trying to do the same thing but they're all old threads with no solutions. I will post my markup in a moment, and do a jsfiddle too. – ClarkeyBoy Jan 27 '11 at 03:04
In fact if you go to http://live.heritageartpapers.com/catalogue.aspx?ItemID=89099634-cbd0-44a0-9e3f-b4014e3a2714 then you will be able to see it in action whilst I am putting my sample code together. – ClarkeyBoy Jan 27 '11 at 03:08
Ok I've added the JSFiddle. You should be able to see what I am trying to do - but obviously the div is taking the -50% margin from its container, not itself. Its its own width / height which I would like it to use. I know this isn't possible but there has to be a way - it seems like such a simple thing to do... – ClarkeyBoy Jan 27 '11 at 03:16

Vertically and horizontally centred variable sized image enlargement (in div) using CSS and HTML only

3 Answers3