Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to center a <div> using CSS grid Property?
The CSS grid is one of the most widely used elements in CSS. This element is similar to flexbox. CSS grids are two-dimensional layout systems on the web. We can place the elements in rows, columns, or both with the help of a grid.
In this article, we shall understand how to center a div using the CSS grid property only. We shall use the place-items and align-items properties to achieve the same.
Use Place-items property
Grid-container class sets the display property to the grid to create a grid container, and the place-items property is set to the center to align the items in the center of the grid. The inner div will be centered both vertically and horizontally within the grid container.
Syntax
.grid-container {
display: grid;
place-items: center;
}
Here, we defined the HTML container as a grid element by using the display property. Next, we used the place-items property to center-align the grid. Note that the place-item property works for the grid element only.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
display: grid;
place-items: center;
border:2px solid black;
width:50%;
}
body{
display: grid;
place-items: center;
}
</style>
</head>
<body>
<div class="container">
<p>This is the grid element</p>
</div>
</body>
</html>
Use the justify-items Property
We have multiple options in the grid layout to center align the div. Another method to center the div is to use the justify-items property.
Syntax
<element selector>{
display: grid;
Justify-items: center{
}
In the above syntax, we defined the HTML tag to be a grid element using the display property and entered the div using the justify-items.
Example code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
justify-items: center;
border: 2px solid yellow;
width:50%;
}
body {
display: grid;
place-items: center;
}
</style>
</head>
<body>
<div class="container">
<p>How to center align the grid element</p>
</div>
</body>
</html>
Explanation
The CSS styles set the display property of the ".container" class to a grid, with justified items centered and a yellow 2px solid border. The width is set to 50% to center the content within the parent element.
The <body> element sets its display property to a grid and uses the place-items property to center content both horizontally and vertically within the page. The <div class="container"> element is the parent element holding the centered text "How to center align the grid element."
Use Self-Alignment Properties
Another option is to use the self-align properties. We have align-self, and justify-self properties to center align the divs.
Syntax
<parent element selector>{
display: grid;
}
<child element selector>{
align-self: center;
justify-self: center;
}
First, we target the parent element. We declare the parent element to be a grid element. Next, we target the child element. We used the align-self and justify-self properties to center-align the grid.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
width: 50%;
border: 2px solid purple;
height: 5vh;
}
.child {
align-self: center;
justify-self: center;
}
body {
padding: 5vh;
display: grid;
place-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="child">Placing the child div to center</div>
</div>
</body>
</html>
The head section includes CSS styles for the page.The .container class sets display as a grid, justify-items as center, and width to 50% with a yellow border.
The body element is set with a display as a grid and uses place-items to center content horizontally and vertically. The div element with class "container" acts as a parent and contains the text "How to center align the grid element," which will be centered horizontally within it.
Conclusion
Using the CSS Grid layout, you can center a div in several ways. The method you choose should depend on your own needs and the structure of your grid. This article helps you understand how to center a <div> using CSS grip properties.
18K+ Views
