absolute img center position in div - html

Question

How to center align img with absolute positioning in div or table cell if I dont know width of image?
for example
<div style="position: relative">
<img style="position: absolute" />
</div>

Answer 1

Aligns the element horizontal and vertical to the relative parent.
<div style="position: relative">
<img class="centered" />
</div>
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
'top' and 'left' set to 50% will center the top-left-corner of the element. Translating is by -50% for both X and Y sets the element to the exact center of the parent.
For browser support take a look here:
Translate2d - caniuse.com

Answer 2

You can use the negative margin trick, assumed you know the dimensions of the image:
img{
top:50%;
left:50%;
margin-left : -(<imagewidth>/2)px;
margin-height: -(<imageheight>/2)px;
}
when you only target browsers which support the calc() feature you could do:
img{
top: calc(50% - <imagewidth>/2px);
left: calc(50% - <imageheight>/2px);
}
When the browser supports translation you can translate it -50% of the image-dimensions:
img{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
If none of that is possible, your last resort is altered markup and display:table:
<div>
<div>
<img />
</div>
</div>
div{height:100%;width:100%;
display:table;
text-align: center;
vertical-align: middle;}
div>div{
display:table-cell;
}
see Demo for latest case

Answer 3

img {
display: block;
margin: 0 auto;
}
Check this JSFIDDLE1
or
div {
position: relative;
text-aligm: center;
width:2000px;
}
img {
position: absolute;
}
Check this JSFIDDLE2

Answer 4

Simple way to center an image vertically
if you know the height of div. then you can do image as vertical align.
div{
text-align:center;
height:150px;
line-height: 150px;
}
img{
vertical-align: middle;
}