Blog for web designers

Image vertically and horizontally center with css and html

Image vertically and horizontally center with css and html

Image vertically and horizontally center with css and html

In this post you will learn how to make image vertically and horizontally center only with css and html. This can be done without any interactive language like javascript and jquery. With short and simple html and css you can achieve this goal.

Your HTML markup


<div class="img_vertival">
    <img src="images/ana.png" alt="ana">
</div>

Your css


.img_vertival {
  position: relative;
  height: 500px;
  width: 500px;
}
img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.