How To Vertically Center Image Css

by

Vertically centering an image on a web page is a common task that often stumps developers, especially beginners. However, with modern CSS, there are several ways to achieve this with just a few lines of code. In this blog post, we’ll discuss three different methods to vertically center an image using CSS: using flexbox, using grid, and using the transform property.

Method 1: Using Flexbox

Flexbox is a powerful and flexible layout module that makes it easy to create complex and responsive layouts. To vertically center an image using flexbox, follow these steps:

  1. Create a container element and set its display property to flex.
  2. Set the align-items property to center.

Here’s an example:

<!– HTML –>
<div class=”container”>
<img src=”image.jpg” alt=”Sample Image”>
</div>

<!– CSS –>
.container {
display: flex;
align-items: center;
height: 100vh; /* optional: set container height to viewport height */
}

Method 2: Using Grid

CSS Grid Layout is another powerful layout system that can be used to vertically center images. Here’s how:

  1. Create a container element and set its display property to grid.
  2. Set the align-items property to center.

Here’s an example:

<!– HTML –>
<div class=”container”>
<img src=”image.jpg” alt=”Sample Image”>
</div>

<!– CSS –>
.container {
display: grid;
align-items: center;
height: 100vh; /* optional: set container height to viewport height */
}

Method 3: Using Transform

If you prefer to vertically center an image without using flexbox or grid, you can use the transform property. To do this:

  1. Create a container element and set its position property to relative.
  2. Set the image’s position property to absolute and set its top property to 50%.
  3. Apply the transform: translateY(-50%) to the image.

Here’s an example:

<!– HTML –>
<div class=”container”>
<img src=”image.jpg” alt=”Sample Image”>
</div>

<!– CSS –>
.container {
position: relative;
height: 100vh; /* optional: set container height to viewport height */
}

.container img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

By using any of these three methods, you can easily vertically center an image using CSS. Each method has its own set of advantages and use cases, so choose the one that works best for your specific requirements.