Vertically Center Responsive Image

Question

I am wondering if there is a simple way to vertically center a responsive image.

Please refer to the following jsFiddle: http://jsfiddle.net/persianturtle/yawTb/1/

Basic HTML:

<img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo">

Basic CSS:

.mobile-title-size {
position: absolute;
top: 2.5%;
left: 6%;
width: 70%;
max-width: 300px;

}

This is the mobile header that uses the same image that is displayed on tablet and desktop viewports. Since the image is already being loaded anyway, I am looking to use this same image, resize it smaller and vertically align it so that I can use one image for all viewports.

The Problem: On browser resize, the image does get smaller, but it does not vertically align in the center.

The Goal: Even though the width overlaps badly in this example, it is not an issue on my site. The goal is only to vertically center the image as the browser resizes.

I am okay with using a javascript/jQuery solution but of course, simple CSS is preferred.

Any help is greatly appreciated!

Solution 1

There are several ways to do it - purely CSS or a JS-based method.

---

Updated answer

Update: With the advent of CSS transform support, here is a rather elegant solution of positioning elements using pure CSS. With the given markup:

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

For your CSS:

.container {
    /* The container has to have a predefined dimension though */
    position: relative;
}
.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Updated JSFiddle

---

Old answer

For CSS, you can construct a ghost element within the container of the <img> element. Chris Coyier did an excellent write up on this technique. Let's say your HTML code looks like this:

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

Then your CSS would be:

.container {
    font-size: 0;
    text-align: center;
}
.container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.container > img {
    display: inline-block;
    vertical-align: middle;
}

The functional CSS fix can be seen working in this fiddle - http://jsfiddle.net/teddyrised/yawTb/8/

Or, you can use a JS-based method:

$(document).ready(function() {
    $(window).resize(function() {
        $(".container > img").each(function() {
            var cHeight = $(this).parent(".container").height(),
                cWidth = $(this).parent(".container").width(),
                iHeight = $(this).height(),
                iWidth = $(this).width();

            $(this).css({
                top: 0.5*(cHeight - iHeight),
                left: 0.5*(cWidth - iWidth)
            });
        });
    }).resize();  // Fires resize event when document is first loaded
});

But you will have to use the following CSS:

.container {
    position: relative;
}
.container img {
    position: absolute;
    z-index: 100;
}

[Edit]: For the JS-based method where you absolutely position the image element, you will have to explicitly state the dimensions of the .container element, or have some content in it (but it kind of defeats the purpose because the image will be above the content). This is because the image element has been taken out of the document flow, and therefore its dimensions will not affect the size of the parent container.

The working example of the JS version is here - http://jsfiddle.net/teddyrised/yawTb/7/

Solution 2

The solution you've got works for old browsers but in the near future (right now has around the 80% of the browser support) you can do this, a much simpler and elegant solution:

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

Comments

[Raphael Rafatpanah]

Take a look at this updated jsFiddle: jsfiddle.net/persianturtle/yawTb/4 which shows two boxes, the second of which is using your CSS solution. It does align nicely on the bottom of the div but it is not centered. Strange, don't you think? Anyway, I appreciate your input, I'll be trying the javascript solution now!

[Raphael Rafatpanah]

It doesn't seem that the javascript solution helps either! Look at this jsFiddle for reference: jsfiddle.net/persianturtle/yawTb/5

[Terry]

Fixed an issue with the JS - now it's working, verified with a functional fiddle jsfiddle.net/teddyrised/yawTb/7. The CSS fix can be seen in this fiddle jsfiddle.net/teddyrised/yawTb/8. The reason why the CSS fix broke was because I accidentally used vertical-align: center instead of vertical-align: middle :P my bad. I have updated my answer to reflect the changes.

[Terry]

@runrunforest By "this", are you referring to the CSS 2D transform method, or the JS-based method? For the former, you can use transforms with a -ms- prefix. For the latter, it should work just out of the box.

[angry kiwi]

Like this? -ms-transform: translate(-50%, -50%); As I don't have windows machine right now with me I can't test it now.

[BGBRUNO]

In "Safari" on "Mac, iPhone" can still be a problem with center - this may help "-webkit-transform: translate(-50%, -50%) translateZ(0px);".

[Malik Brahimi]

@Terry Can I email you a quick problem?

[Terry]

@MalikBrahimi You should try to look for similar questions on SO first. If you are sure your question hasn't been addressed before—create a new one.

[Malik Brahimi]

@Terry This is a very individualized personal question, and everything I've found doesn't work.