Most searched question on Internet is “How to align div center in HTML”. If not you, atleast I did search many times before, so decided to put my notes as a blog post here.

Using CSS Grid we can align elements in nine different positions.

Top – Left, center and right;
Middle – Left, center and right;
Bottom – Left, center and right;

Let’s begin..

To position the items within container we can use these two properties: align-content to deal with horizontal axis and justify-items to deal with vertical axis.

There are many possible values available for the above said two properties. But I have used most commonly used “start”, “center” and “end”.

CSS Grid Layout Alignment

I will use this simple code to demonstrate how to Align elements in nine different positions by changing CSS values for align-content and justify-items properties.

HTML
<div id="container">
    <div style="font-size:30px;">šŸ˜<div/>
<div>
CSS
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;
  display: grid;  
} 
šŸ˜

Emoji is aligned left by default though we used “display: grid” CSS property, because we haven’t used any grid align CSS properties yet.Ā 

1. Top Left

To align an item “TOP LEFT” within the container, useĀ align-content:startĀ andĀ justify-items:start.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:start; 
  justify-items:start;  
 } 

Demo:

😍

2. Top center

To align an item TOP CENTER within the container, useĀ align-content:startĀ andĀ justify-items:center.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:start; 
  justify-items:center;  
 } 

Demo:

😍

3. Top right

To align an item TOP RIGHT within the container, use the align-content:start andĀ justify-items:end.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:start; 
  justify-items:end;  
 } 

Demo:

😍

4. Middle Left

To align an item MIDDLE LEFT within the container, useĀ align-content:centerĀ andĀ justify-items:start.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:center; 
  justify-items:start;  
 } 

Demo:

😍

5. middle center

To align an item MIDDLE CENTER within the container, useĀ align-content:centerĀ andĀ justify-items:center.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:center; 
  justify-items:center;  
 } 

Demo:

😍

6. middle right

To align an item MIDDLE RIGHT within the container, useĀ align-content:centerĀ andĀ justify-items:end.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:center;
  justify-items:end;  
 } 

Demo:

😍

7. Bottom Left

To align an item BOTTOM LEFT within the container, useĀ align-content:endĀ andĀ justify-items:start.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:end; 
  justify-items:start;  
 } 

Demo:

😍

8. bottom center

To align an item BOTTOM CENTER within the container, useĀ align-content:endĀ andĀ justify-items:center.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:end; 
  justify-items:center;  
 } 

Demo:

😍

9. bottom right

To align an item BOTTOM RIGHT within the container, useĀ align-content:endĀ andĀ justify-items:end.

Code
#container {  
  width:25%;
  height:150px;
  border: 3px solid #2d2d2d;  
  display: grid;
  align-content:end; 
  justify-items:end;  
 } 

Demo:

😍
Hope you find this article useful. Please spread a word about this post with your friends / colleagues, that will motivate me to write more interesting articles. Happy learning!

Join the Newsletter

Subscribe to get our latest content by email.
    We won't send you spam. Unsubscribe at any time.