How to Image center align vertically and horizontally in css ?

Image center align vertically and horizontally

 

They are many method you can do this.

1. Used to table-cell Property

HTML

<div class="parent">
<img src="dummypic.jpg">
</div>

Css

.parent{
width:200px;
height:200px;
text-align:center;
display:table-cell;
vertical-align:middle;
}

.parent img{
width:150px;
height:150px;
vertical-align:top;
}

Live Demo

---

2. Used to Position Method

HTML

<div class="parent">
<img src="dummypic.jpg">
</div>

Css

.parent{
width:200px;
height:200px;
position:relative;
}

.parent img{
width:150px;
height:150px;
vertical-align:top;
position:absolute;
left:50%;
top:50%;
margin-left:-75px; 
margin-top:-75px; 
}

Live Demo

---

3. Used to line Height Method

HTML

<div class="parent">
<img src="dummypic.jpg">
</div>

Css

.parent{
width:200px;
height:200px;
text-align:center;
line-height:200px;   
}
.parent img{
width:150px;
height:150px;
vertical-align:middle;
}

Live Demo