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 do I center tag using CSS?
Centering a <div> in CSS is one of the most common layout tasks in web development. There are several approaches − Flexbox, Grid, and margin-based centering. Let's look at each method with examples.
Syntax
/* Flexbox Method */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid Method */
.container {
display: grid;
place-items: center;
}
/* Margin Method */
.element {
margin: 0 auto;
width: value;
}
Method 1: Using Flexbox (Recommended)
Flexbox is the most popular and reliable method for centering a div both horizontally and vertically −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 300px;
background: #D5F5E3;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #CCD1D1;
padding: 15px 30px;
font-family: verdana;
color: #DE3163;
}
</style>
</head>
<body>
<div class="container">
<div class="box">CENTERED WITH FLEXBOX</div>
</div>
</body>
</html>
A light green container with a gray box containing "CENTERED WITH FLEXBOX" text positioned perfectly in the center both horizontally and vertically.
display: flex on the parent, justify-content: center for horizontal centering, and align-items: center for vertical centering.
Method 2: Using CSS Grid
CSS Grid offers the shortest syntax for centering with place-items: center −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 300px;
background-color: #E8DAEF;
display: grid;
place-items: center;
}
.box {
background-color: yellow;
padding: 15px 30px;
font-family: verdana;
color: #DE3163;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">CENTERED WITH GRID</div>
</div>
</body>
</html>
A light purple container with a yellow box containing "CENTERED WITH GRID" text positioned in the center of the container.
place-items: center is a shorthand for align-items: center and justify-items: center combined.
Method 3: Using margin auto
For horizontal-only centering of a fixed-width div −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
padding: 20px;
background: #D5F5E3;
margin: 50px auto;
text-align: center;
font-family: verdana;
color: #DE3163;
}
</style>
</head>
<body>
<div class="box">CENTERED WITH MARGIN AUTO</div>
</body>
</html>
A light green box with "CENTERED WITH MARGIN AUTO" text, centered horizontally on the page with a 50px top margin.
margin: auto distributes equal space on left and right. The div must have a defined width for this to work.
Comparison
| Method | Horizontal | Vertical | Best For |
|---|---|---|---|
Flexbox |
Yes | Yes | Most centering scenarios |
Grid |
Yes | Yes | Shortest syntax, grid layouts |
margin: auto |
Yes | No | Simple horizontal centering |
Conclusion
Use display: flex with justify-content: center and align-items: center for the most reliable centering. CSS Grid with place-items: center is the shortest alternative.
488 Views
