Habdul HazeezInspired by the following tweet:
Introduction
One way or the other we've all been in a situation where we need to center HTML page elements with CSS. Prior to the CSS Grid, we've resolved to use margins or another method we can think of which can require extra HTML code because we'll have to provide a wrapper around the element we want to be centered.
An example of using margins can resemble the snippet below:
.selector {
/* Other properties here */
margin: 0 auto;
}
The snippet above is still valid but in certain cases, it requires extra HTML markup.
Take a look at the HTML code below:
<body>
<div class="container">
<!-- contents here -->
</div>
</body>
If you plan to center the div> element, with margins the CSS could be:
.container {
width: 65%
margin: 0 auto;
}
How margin centering works
The margin property is a shorthand property for four other properties which are are used to apply margins around the four sides of a block element i.e top, right, left, and bottom.
These properties are:
margin-topmargin-rightmargin-bottommargin-left
The margin property can accept one, two, three, or four values. How the browser applies the margin based on the numbers of values you supply is given below:
| Margin value | Browser computed value |
|---|---|
margin: 2em; |
margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em;
|
margin: 1em 2em; |
margin-top: 1em; margin-right: 2em; margin-bottom: 1em; margin-left: 2em;
|
margin: 1em 2em 3em; |
margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em;
|
margin: 1em 2em 3em 4em; |
margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 4em;
|
From the table above you should note the following:
- When you supply two values to the
marginproperty, the first value is applied to the top and bottom and the second value is applied to the left and right - When you supply three values to the
marginproperty, the first value is applied to the top the second value is applied to the left and right and the third value is applied to the bottom - When you supply a single value it gets applied to all four sides
- When you supply four values, the first value gets applied to the top, the second value to the right the third value to the bottom and the fourth value to the left
The margin property also accepts 0 in which case margins are not applied on all four sides and the keyword auto which tells the browser to automatically determine the margins on all four sides and in turn the element will be at the center of its container (you see where am going?).
Therefore when you use the snippet below:
.selector {
margin: 0 auto;
}
This is what you are telling the browser:
- Kindly use a
margin-topandmargin-bottomvalues of0and use amargin-leftandmargin-rightvalues with a value ofauto
This will result in the browser placing the item at the center of the element's container.
This is what takes to center an element using margins, CSS Grid makes this entire process easy.
How to center elements with CSS Grid
Centering element in CSS Grid is literally two lines:
.selector {
/* Other properties to style the element */
display: grid;
place-items: center;
}
That's it. At the time of writing the place-items property has global support of 88.84% based on data on Can I use.
Have fun!.
