Variable size image with max width/height inside a fitted centered element

Question

I have a <a> tag with an <img> inside of it that I want to be vertically and horizontally on the screen, but also have a max-height and max-width so that if sits nicely on the screen with whitespace around it. It needs to work for both portrait and landscape images on any screen size and cannot crop the image at all. I can't get the image's max-height to work, however.

The <a> also has some text that is positioned under the left side of the image, so I'm trying to make the size of the <a> match the size of the <img> to make the positioning of this text right.

HTML:

<a href="#">
    <img src="image.jpg" alt="it's a picture">
    <p>Image Title</p>
</a>

CSS:

a {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    max-width: 60%;
    max-height: 60%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

p {
    position: relative;
    top: 10px;
}

Answer 1

Setting percentage max-width when no width specified is almost the same as setting a regular percentage width, so i changed the link size to simple width/height 60%, hope thats all right. Now, the easiest way to center things is Flexbox. You can learn more about it here:

http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

I had to add an extra div to wrap both the image and subtitle, so the text can be aligned to the bottom left of the image.

<a>
    <div>
        <img src="image.jpg"/>
        <span>asd</span>
    </div>
</a>

And here comes the flexbox CSS:

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    display: block;
    width: 60%;
    height: 60%;
    border:2px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}

a span {
    display:block;
}

a div {
    max-width:100%;
    max-height:100%;
    display:block;
    margin:0 auto;   
}

a img {
    max-width:100%;
    max-height:100%;
    display:block;
}

And this is how it looks like:

http://jsfiddle.net/9xgyu6a4/

Works with portrait images too:

http://jsfiddle.net/9xgyu6a4/1/

Answer 2

This code from CSS-Tricks will allow you to center the image almost directly in the middle of the screen:

<a href="#">
    <img src="/pathTo/image.jpg" alt="it's a picture">
    <span class="title">The Image's Title</span>
</a>

a {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title {
    position:fixed;
    width:327px;
    text-align:center;
}

The trick is to use fixed positioning on the <a> element, such that both the top and left CSS properties are taken into account. The image won't resize as the viewport becomes smaller, and will stay centered in landscape/portrait layouts. Assuming that the height and width of the image is known (in this case, the image is 327px by 327px - I'm not sure exactly what is meant by "variable size image"), .title has an equal width to the image.