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;
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”.
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.
<div id="container">
<div style="font-size:30px;">š<div/>
<div>#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.
#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.
#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.
#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.
#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.
#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.
#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.
#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.
#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.
#container {
width:25%;
height:150px;
border: 3px solid #2d2d2d;
display: grid;
align-content:end;
justify-items:end;
}
