align imge on the center of the div - html

Question

html
<div style="display: block; height: 200px; width: 200px; background-color: red; position: relative">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute;"/>
</div>
This fits my image according to my div. What I want is no matter how big or small is image it should be displayed according to div.
If the image is vertical there should be blank space on top and bottom and if it is horizontal then left and right blank space. Image should not be stretched and the height and width of the div should be fixed.
I am able to do this but vertical image is aligned top and horizontal is aligned left. How can I make it on center ?

Answer 1

add left:50% & top:50% & transform: translate(-50%, -50%);
<div style="display: block; height: 200px; width: 200px; background-color: red; position: relative">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" style="max-height:100%; max-width: 100%; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); "/>
</div>

Answer 2

Putting all together, and naming “wraptocenter” the class of the container, that’s the relevant CSS. Code for IE/Mac is wrapped in a suitable filter. Code for IE7-/Win is put in conditional comments.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
And that’s the relevant HTML
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

Answer 3

<div class="maindiv">
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" alt="tall image" />
</div>
img
{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto auto;
}
.maindiv
{ border: 1px solid #888;
display:table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
}

Answer 4

This should workmargin: 0 auto;
display: block;
max-width: 100%;

Answer 5

Here follow the code:
<div style="display:inline-block; height:200px; width:200px; background-color:red; position:relative; vertical-align:middle; text-align:center">
Great coding for you!

Answer 6

You can use below styles to the div for horizontal and vertical alignment.
display: table-cell;
vertical-align: middle;
text-align: center;
And avoid position for both div and img
Below style added for img for vertical centering.
display: inline-block;
vertical-align: middle;
Also I have separated HTML and style as in below sample.
div{
height: 200px;
width: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
max-height: 100%;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
<div>
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" />
</div>

Answer 7

You should remove some of the stylings from div and all stylings from the img and assign the image a fixed width using width attribute as below:
HTML:
<div>
<img src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg" width="150" />
</div>
CSS:
div {
height: 200px;
width: 200px;
background-color: red;
}
div img {
display: table;
margin: 0 auto;
}
Refer demo.

Answer 8

flex box is a good solution for this situation. Your code have to be modified a little bit like this:
#container {
/*flex box goes here*/
display: flex;
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
/* your old code goes here*/
height: 200px;
width: 200px;
background-color: red;
position: relative
}
#img {
/* you can change height and width to test the result */
max-height:50%;
max-width: 50%;
}
<div id="container">
<img id="img" src="http://www.kingsailfishmounts.com/Striped_Marlin_Plaque_(hotizontal)-mount-p-543.jpg"/>
</div>