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 to Make the Middle Item Stay Centered?
Centering the middle item in a layout while ensuring it stays centered even when other items are removed is a common design challenge. This article explores CSS techniques to center the middle item using methods that maintain its position regardless of adjacent elements.
Method 1: Using Flexbox with Auto Margins
Flexbox offers a straightforward way to center an item within a container. By setting the middle item's margin property to auto, it remains perfectly centered without depending on adjacent items.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Middle Item with Flexbox</title>
<style>
.container {
display: flex;
align-items: center;
background-color: #f3f3f3;
padding: 20px;
min-height: 100px;
}
.item {
padding: 10px 20px;
background-color: #007bff;
color: white;
border-radius: 5px;
}
.middle-item {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Left</div>
<div class="item middle-item">Center</div>
<div class="item">Right</div>
</div>
</body>
</html>
A gray container with three blue rounded boxes labeled "Left", "Center", and "Right". The center box remains perfectly centered in the container.
Method 2: Using CSS Grid
CSS Grid provides another reliable method to center items. By creating a three-column grid and placing the middle item in the center column, it maintains its position regardless of other items.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Middle Item with Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
background-color: #f3f3f3;
padding: 20px;
min-height: 100px;
}
.grid-item {
padding: 10px 20px;
background-color: #28a745;
color: white;
border-radius: 5px;
}
.middle-item {
grid-column: 2;
justify-self: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Left</div>
<div class="grid-item middle-item">Center</div>
<div class="grid-item">Right</div>
</div>
</body>
</html>
A gray container with three green rounded boxes arranged in a grid. The center box is perfectly centered and will maintain its position even if side items are removed.
Method 3: Using Absolute Positioning
Absolute positioning with transform provides the most reliable centering method, as the middle item's position is completely independent of other elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Middle Item with Absolute Positioning</title>
<style>
.relative-container {
position: relative;
background-color: #f3f3f3;
padding: 20px;
min-height: 100px;
}
.side-item {
display: inline-block;
padding: 10px 20px;
background-color: #dc3545;
color: white;
border-radius: 5px;
}
.absolute-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: #ffc107;
color: black;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="relative-container">
<div class="side-item">Left</div>
<div class="absolute-center">Absolute Center</div>
<div class="side-item" style="float: right;">Right</div>
</div>
</body>
</html>
A gray container with red boxes on the left and right sides, and a yellow box labeled "Absolute Center" positioned exactly in the center of the container using absolute positioning.
Conclusion
Each method has its advantages: Flexbox with auto margins is simple and responsive, CSS Grid offers precise control over layout, and absolute positioning provides the most reliable centering regardless of other elements. Choose the method that best fits your layout needs.
1K+ Views
