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 center a using CSS grid Property?
To center a div using CSS grid property, we will be using CSS grid layout and its properties. CSS grid is one of the most widely used layout systems in CSS which is similar to flexbox. CSS grids are two-dimensional layout systems on the web that allow us to place elements in rows, columns, or both.
In this article, we shall understand how to center a div using the CSS grid property with three different approaches.
Syntax
/* Method 1: Using place-items */
.container {
display: grid;
place-items: center;
}
/* Method 2: Using grid positioning */
.container {
display: grid;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
}
.item {
grid-row: 2;
grid-column: 2;
}
/* Method 3: Using place-self */
.container {
display: grid;
}
.item {
place-self: center;
}
Method 1: Using place-items Property
In this approach, we use place-items: center on the grid container to center all grid items. This property is a shorthand for align-items and justify-content properties.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
place-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.item {
border: 2px solid green;
padding: 20px;
width: 150px;
height: 100px;
background-color: rgb(109, 224, 244);
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Centered Div</div>
</div>
</body>
</html>
A light blue rectangular div with green border and "Centered Div" text appears perfectly centered both horizontally and vertically on the page.
Method 2: Using grid-row and grid-column Properties
This method uses grid-row and grid-column properties to position the div in the center cell of a 3x3 grid
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
height: 100vh;
background-color: #f0f0f0;
}
.item {
grid-row: 2;
grid-column: 2;
width: 150px;
height: 100px;
background-color: rgb(109, 224, 244);
border: 2px solid green;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Grid Positioned</div>
</div>
</body>
</html>
A light blue rectangular div with green border and "Grid Positioned" text appears centered on the page by being placed in the middle cell of an invisible 3x3 grid.
Method 3: Using place-self Property
In this approach, we use the place-self property on the grid item itself. This property is a shorthand for align-self and justify-self properties
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
height: 100vh;
background-color: #f0f0f0;
}
.item {
place-self: center;
width: 150px;
height: 100px;
background-color: rgb(109, 224, 244);
border: 2px solid green;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Self-Centered</div>
</div>
</body>
</html>
A light blue rectangular div with green border and "Self-Centered" text appears centered on the page using the place-self property.
Conclusion
CSS Grid provides multiple effective ways to center elements. The place-items property is the simplest for centering all items, while place-self gives individual control over each item's positioning.
20K+ Views
