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 horizontally center a in another?
To horizontally center a div inside another div, we need to apply CSS centering techniques on the inner element. The most common methods include using margin: 0 auto, flexbox, and position with transform.
The key principle is that the inner div must have a defined width smaller than its parent, so the browser can calculate equal space on both sides to center it.
Syntax
Using margin auto
.inner {
width: 400px;
margin: 0 auto;
}
Setting left and right margins to auto distributes the remaining space equally on both sides, centering the element. The inner div must have a defined width or max-width.
Using flexbox
.outer {
display: flex;
justify-content: center;
}
Applying display: flex with justify-content: center on the parent centers all child elements horizontally without requiring a fixed width on the child.
Using position and transform
.outer {
position: relative;
}
.inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This method positions the inner div at 50% from the left edge, then shifts it back by half its own width using translateX(-50%) to achieve perfect centering.
Example: Using margin auto
In this example, we center the inner div using margin: 0 auto −
<!DOCTYPE html>
<html>
<head>
<style>
.o-div {
padding: 50px;
background-color: Lime;
}
.i-div {
background-color: Fuchsia;
max-width: 400px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 200px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="o-div">
<div class="i-div">
I am centered using margin auto
</div>
</div>
</body>
</html>
The inner div with a fuchsia background appears horizontally centered inside the lime-colored outer div.
Example: Using Flexbox
In this example, we use flexbox on the parent container to center the inner div −
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
display: flex;
justify-content: center;
padding: 40px;
background-color: #dcedc8;
}
.inner {
width: 300px;
padding: 30px;
background-color: #42a5f5;
color: white;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Centered with Flexbox
</div>
</div>
</body>
</html>
The blue inner div is horizontally centered inside the green outer div using flexbox.
Example: Using Position and Transform
In this example, we use position: absolute with transform to center the inner div −
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
position: relative;
height: 200px;
padding: 20px;
background-color: #ffe0b2;
}
.inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 250px;
padding: 25px;
background-color: #ef5350;
color: white;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Centered with Transform
</div>
</div>
</body>
</html>
The red inner div is centered horizontally inside the orange outer div using absolute positioning and transform.
Comparison of Methods
Method
Requires Fixed Width
Best For
margin: 0 autoYes
Simple centering with known width, wide browser support
flexboxNo
Modern layouts, centering without fixed widths
position + transformNo
Overlapping or absolute-positioned elements
Conclusion
There are three reliable ways to horizontally center a div inside another − margin: 0 auto, flexbox, and position with transform. The margin: 0 auto method is the simplest and most widely supported, while flexbox offers the most flexibility for modern layouts. Choose the approach that best fits your layout requirements and browser support needs.
Updated on: 2026-03-16T07:54:26+05:30
363 Views
Advertisements
To horizontally center a div inside another div, we need to apply CSS centering techniques on the inner element. The most common methods include using margin: 0 auto, flexbox, and position with transform.
The key principle is that the inner div must have a defined width smaller than its parent, so the browser can calculate equal space on both sides to center it.
Syntax
Using margin auto
.inner {
width: 400px;
margin: 0 auto;
}
Setting left and right margins to auto distributes the remaining space equally on both sides, centering the element. The inner div must have a defined width or max-width.
Using flexbox
.outer {
display: flex;
justify-content: center;
}
Applying display: flex with justify-content: center on the parent centers all child elements horizontally without requiring a fixed width on the child.
Using position and transform
.outer {
position: relative;
}
.inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This method positions the inner div at 50% from the left edge, then shifts it back by half its own width using translateX(-50%) to achieve perfect centering.
Example: Using margin auto
In this example, we center the inner div using margin: 0 auto −
<!DOCTYPE html>
<html>
<head>
<style>
.o-div {
padding: 50px;
background-color: Lime;
}
.i-div {
background-color: Fuchsia;
max-width: 400px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 200px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="o-div">
<div class="i-div">
I am centered using margin auto
</div>
</div>
</body>
</html>
The inner div with a fuchsia background appears horizontally centered inside the lime-colored outer div.
Example: Using Flexbox
In this example, we use flexbox on the parent container to center the inner div −
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
display: flex;
justify-content: center;
padding: 40px;
background-color: #dcedc8;
}
.inner {
width: 300px;
padding: 30px;
background-color: #42a5f5;
color: white;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Centered with Flexbox
</div>
</div>
</body>
</html>
The blue inner div is horizontally centered inside the green outer div using flexbox.
Example: Using Position and Transform
In this example, we use position: absolute with transform to center the inner div −
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
position: relative;
height: 200px;
padding: 20px;
background-color: #ffe0b2;
}
.inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 250px;
padding: 25px;
background-color: #ef5350;
color: white;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Centered with Transform
</div>
</div>
</body>
</html>
The red inner div is centered horizontally inside the orange outer div using absolute positioning and transform.
Comparison of Methods
| Method | Requires Fixed Width | Best For |
|---|---|---|
margin: 0 auto |
Yes | Simple centering with known width, wide browser support |
flexbox |
No | Modern layouts, centering without fixed widths |
position + transform |
No | Overlapping or absolute-positioned elements |
Conclusion
There are three reliable ways to horizontally center a div inside another − margin: 0 auto, flexbox, and position with transform. The margin: 0 auto method is the simplest and most widely supported, while flexbox offers the most flexibility for modern layouts. Choose the approach that best fits your layout requirements and browser support needs.
363 Views