Centering an auto-sized image both horizontally and vertically - html

Question

I've done a lot of searching and found quite a few answers to this problem, but none of them seemed to work when I tried them in my particular setup. Here is a JSFiddle of the problem I am trying to solve:
http://jsfiddle.net/kr394ye2/1/
.classA {
background-color: yellow;
width: 50px;
height: 50px;
float: left;
}
.classB {
width: auto;
height: auto;
max-width: 50px;
max-height: 50px;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
I am trying to get the image, which is automatically sized to the div it is contained in, to be centered both horizontally and vertically in the div. I cannot make the image the background of the div.
I have tried auto margins with various types of display (inline, inline-block). I've tried the text-align property, as well as vertical-align. I've tried the center tag. Nothing I tried has worked.
A solution should center the image both horizontally AND vertically.

Answer 1

You could use the inline block + pseudo element tricks.
.classA {
background-color: yellow;
width: 50px;
height: 50px;
float: left;
text-align: center;
font-size: 0;
}
.classA:after {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
.classB {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg">
</div>
Note, the solution works only if the image is the only child inside the container, plus the container has a known height set.
By the way <img> is self-closing tag, <img></img> is wrong syntax, just use <img src=""> or <img src="" />.

Answer 2

Add CSS as bellow
.classB {
Margin:auto;
max-width: 50px;
max-height: 50px;
}

Answer 3

If you need vertical AND horizontal centering then this is what you need
http://jsfiddle.net/M_Elf/38kgyzwu/2/
in general
margin:0 auto;
is making wonders
or else: if you only need horizontal centering just use
margin-left:auto;
margin-right:auto;
on your main wrapper

Answer 4

Change your CSS to the following:
.classA {
background-color: yellow;
width: 50px;
height: 50px;
padding: 5px;
}
.classB {
display: block; margin: auto;
object-fit: cover;
max-width: 100%;
height: 100%;
}
The CSS object-fit: cover helps to fit the image without losing quality.
JSFiddle
Read more about object-fit here: object-fit - MDN Docs

Answer 5

You said you tried block and inline-block; did you try display table-cell for the containing div? that generally will give you what to need to force the aligment you are looking for.

Answer 6

Here you go — you need four lines of code (not including css vendor prefixes):
text-align: center; of parent element does the trick for horizontal positioning
position: relative; top: 50%; transform: translateY(-50%); centers image vertically
I added two blocks with different sizes but same other properties for you to see that it's universal. Checked that in latest chrome, safari, IE10 and Opera, it works consistently.
.classA {
background-color: yellow;
width: 300px;
height: 50px;
float: left;
text-align: center;
}
.classB {
width: auto;
height: auto;
max-width: 300px;
max-height: 50px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.classA2 {
background-color: yellow;
width: 100px;
height: 70px;
float: left;
text-align: center;
}
.classB2 {
width: auto;
height: auto;
max-width: 100px;
max-height: 70px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.separator {
display: block;
clear:both;
padding:20px;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
<div class="separator"></div>
<div class="classA2">
<img class="classB2" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
Hope this helps :)