Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I vertically align an image in a section that extends across the entire web page?
Vertically aligning images in a full-width section is a common web development challenge. Whether you're centering a hero image or creating a vertical gallery, CSS provides several effective methods including flexbox, grid, and the vertical-align property.
Syntax
/* Method 1: Flexbox */
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* Method 2: CSS Grid */
.container {
display: grid;
place-items: center;
}
/* Method 3: vertical-align (for inline elements) */
img {
vertical-align: middle;
}
Method 1: Using CSS Flexbox
Flexbox is the most reliable method for vertically centering images in modern browsers. Use align-items: center for vertical alignment and justify-content: center for horizontal alignment
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
border: 2px solid #333;
}
.container img {
max-width: 300px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<img src="/images/logo.png" alt="Centered Image">
</div>
</body>
</html>
A full-height container with a centered image that maintains perfect vertical and horizontal alignment regardless of container size.
Method 2: Using CSS Grid
CSS Grid offers an even simpler approach with the place-items shorthand property
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.grid-container img {
max-width: 250px;
border: 3px solid white;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="/images/logo.png" alt="Grid Centered Image">
</div>
</body>
</html>
A full-height container with a gradient background displaying a perfectly centered image using CSS Grid.
Method 3: Multiple Images in Vertical Column
For displaying multiple images stacked vertically in the center of a full-width section
<!DOCTYPE html>
<html>
<head>
<style>
.image-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #e8f5e8;
gap: 20px;
padding: 20px;
}
.image-column img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 12px;
transition: transform 0.3s ease;
}
.image-column img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<div class="image-column">
<img src="/coffeescript/images/coffeescript-mini-logo.jpg" alt="Image 1">
<img src="/javafx/images/javafx-mini-logo.jpg" alt="Image 2">
<img src="/hadoop/images/hadoop-mini-logo.jpg" alt="Image 3">
</div>
</body>
</html>
Three images arranged in a vertical column, perfectly centered within a full-height container with hover effects.
Key Properties
| Property | Purpose | Best For |
|---|---|---|
display: flex + align-items: center
|
Vertical centering | Single or multiple elements |
display: grid + place-items: center
|
Both axes centering | Simple centering tasks |
height: 100vh |
Full viewport height | Full-page sections |
Conclusion
Flexbox and CSS Grid are the most effective methods for vertically aligning images in full-width sections. Choose flexbox for more control over alignment direction and grid for simple centering tasks.
478 Views
