Centering div with Grid Areas
This approach required complete understanding of CSS Grid property, we will need grid-tmplate-column and grid-template-rows property to set the div length. To place the grid we will required grid-column and grid-row property.
Example:
HTML
<!DOCTYPE html> <html> <head> <title>Centering DIV Element using Grid Property</title> <style> .container{ width: 100%; min-height: 100vh; display: grid; grid-template-columns: 1fr 200px 1fr; grid-template-rows: 1fr 100px 1fr; } div { border: 2px solid black; grid-column: 2; grid-row: 2; } </style> </head> <body> <article class="container"> <div> <h2>w3wiki</h2> <p>A Learning Platform</p> </div> </article> </body> </html> |
Output:
Centering div with Grid Areas Output
Explanation: Here in this example we used fr unit that indicated the leftover space, we highly recommend to avoid this approach for learning purpose but in real world this approach is beneficial over other approaches.
How to center a using CSS grid Property ?
In this article, we will learn to center an HTML <div> element using the CSS grid property. We can center any element using the below-mentioned approaches. Here we will learn to center a div in 5 different ways.
Table of Content
- Centering div – CSS Grid and place-self
- Centering div – CSS Grid and place-items
- Centering div – CSS Grid and place-content
- Centering div – CSS Grid and Auto Margin
- Centering div – Grid Areas
Before centering a div using the grid property we will need to create a container where we will keep a div that will be center aligned horizontally and vertically. We have given a border to the div so the centering of that div can be visible. Set the main container width to 100% so the div can be moved around into that container.
HTML
<!DOCTYPE html> <html> <head> <title>Centering DIV Element using Grid Property</title> <style> .container{ width: 100%; min-height: 100vh; } div { border: 2px solid black; } </style> </head> <body> <article class="container"> <div> <h2>w3wiki</h2> <p>A Learning Platform</p> </div> </article> </body> </html> |
We will be using CSS grid property in all of our examples. This property will be applied to the container(Parent element), then we will use different approaches to center the div element(Child Element).
.container{
display: grid;
}