We Keep Coding

Center an Image Vertically in a Fixed Position Div

There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?

Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height

specific image resize with jquery

I've been trying for sometime to replicate an effect seen on this website:
http://www.gregparmasmith.com/
If you play around with the width and height of the window, the images keep proportionate w/h based on their aspect ratio. The images are always loaded with a consistent height, making this slideshow look very nice.
Also notice how wider images (vs thinner images) are resized when just the width of the browser window (not width and height together) is reduced - The images bounce down from the top margin.
He seems to be programming this differently than most responsive jquery image plugins I've seen. There is a parent div container, but it has a static size and seems to not govern the position/sizing of its child images.
Looking at the source, the images top,left,width,height css properties are dynamically being altered.
Any suggestions for how to do this??

The effect seen on that page can be accomplished with just html and css. No javascript needed. He's using percentages as the values for his margins so that as the browser size gets smaller, so does the calculated pixel size of the left and right margins of the div that contains the images. Then by setting the img width to a max-width of a fixed pixel size, say 400px, it will ensure it will only reach a certain width as it does on very large screens.
Then by setting the "width" to a percentage like maybe 100% the image will automatically resize to the size of the containing div because that div is responding the size of the browser.
something like this:
#inside {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img {
width: 100%
}
http://jsfiddle.net/wRNJ7/1/

I have found a pretty close solution here in this thread:
Vertically center image on page and maintain aspect ratio on resize
Here's a good working demo:
Demo
html, body {height: 100%}
body {
position: relative;
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
.wrap {
height: 100%;
overflow: hidden;
position: relative;
}
img {
max-width: 70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
This effect is achieved without any javascript, which at first I thought was undoable. In this demo, the action of the resizing is a little different. In the original website I was trying to model (http://www.gregparmasmith.com/12), it is "clear" that resizing happens only when necessary, so that for a thin image (ex. 500x100): When the browser window is made as thin, no shrinking would occur. Resizing of the image would occur only if the width of the image would exceed the width of the browser.
In this jsfiddle, I think I can notice this same action is happening, but it's not as obvious.

bxslider: showing half an image outside of the div

tl;dr version: want to position half an image outside of the bxslider div however overflow:hidden causes every slide of the carousel to show up.
Code I'm using: http://www.dtcontentguy.com/bxslider/
Screenshots: http://screencast.com/t/bTTvC4VPEQ
Long version:
So configuring bxslider for a carousel to use on my site.
How it should look like (in photoshop) (see screenshot 1)
My main concern is the circular png I'm using. To match the style, I want to position the top half of it outside the div. I position it then it looks like this, all cut off (screenshot 2)
That's because by default there is a overflow:hidden to hide the other portions of the carousel. If I turn off the overflow:hidden, the image looks fine but of course the other items show (screenshot 3)
How do I get the image to conform with the carousel but get around the overflow:hidden?
Thanks!

One approach could be to increase the height of the container and push the content down like so:
/* Increase container height, align background to bottom */
.bx-wrapper .bx-viewport {
height: 456px!important;
background-repeat: no-repeat;
background-position: bottom center;
}
/* Push slider arrows down */
.bx-wrapper .bx-controls-direction a {
margin-top: 25px;
}
.bxslider {
margin: 0;
}
/* Push slider content down */
.bxslider li {
padding-top: 184px;
}
/* Position image at top center */
.bxslider li img {
position: absolute;
top: 0;
left: 50%;
margin-left: -91px;
}

Fixed background image horizontally connected to content with fixed width

The problem is: I have a huge background image and content with those characteristics:
the content is centered with margin: auto; and it has a fixed width
the position of the content is in relation to the image (like it fits in the middle of the image)
this connection is only horizontally (vertical scrolling moves everything around as expected)
This works fine, actually, on desktop devices with position fixed on the background image.
But the problem is: When I resize the window until it's smaller than the content, the content is fixed on the left side, but the background image is still centered, as expected. In this case the connection between both elements gets lost.
I have this JavaScript that does the trick, but this is of course some overhead I want to avoid as it isn't smooth anytime due to the calculation:
$(window).resize(function(){
container.css('left', (body.width() - img.width()) / 2);
});
I also tried things like that:
<div id="test" style="
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%:
height: 100%;
background: transparent url(path) no-repeat fixed center top;
"></div>
But this results in the same issue described above.
Is there any elegant CSS solution for this problem?
Demo
Try it yourself
NOTE
The image size is fixed and known and it never gets scaled by the browser.

Is this working for you? http://jsfiddle.net/wPmrm/24/
HTML
<div class="background">
<div class="content">
CONTENT
<br><br>
This example works fine until you the viewport size gets smaller than this content. After that the image isn't sticky anymore.
<br><br>
And check out vertical scrolling.
<div style="height:1500px;"></div>
END
</div>
</div>
CSS
div.background {
min-width: 740px;
background: url('http://placehold.it/1600x1050') top center fixed no-repeat;
}
div.content {
width: 700px;
height: 2000px;
margin: auto;
padding: 50px 20px;
background: none;
opacity: 0.7;
color: #333;
}
.background should be the wrapper for .content with a centered background and have a minimum-width of the .contents width+padding.
Update from comments:
http://jsfiddle.net/wPmrm/28/
We'll have to use a media-query, so when the width is at max 740px we change the background position. Oh and we set background-attachment to fixed again.
CSS added
#media screen and (max-width:740px) {
div.background {
background-position: -435px 0;
}
}
I don't see why it is -435px ((1600-740)/2 would be 430) but it seems to be the most accurate value.

Center object on screen when scrolling

I have a web page with a list on the right and a treeview on the right, and have a drag and drop interface to move objects from one to the other. There is a trash can in the middle used to delete items. Problem is, the page could potentially become 5000px long. How can I keep the trash can centered in the screen when the user scrolls? Thanks in advance for your answers!

To keep an element fixed in a particular position, use position: fixed, for example:
#trashcan {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px; /* half the width */
margin-top: -100px; /* half the height */
}
position: fixed is a lot like position: absolute but with the coordinates/position based on the viewport, not the document. So while position: absolute items will scroll with the page, position: fixed items will stay in place in relation to the viewport.

You could use css to fix the position of the trash can.
.trash-can
{
position: fixed;
left: /*value here*/;
top: /*value here*/;
}

The css shown works nicely for small objects. By small, I mean, smaller than the screen height. Objects that are larger than the screen height, cannot be scrolled when position:fixed is used.