35
loading...
The Ultimate Guide to Center Align - CSS
This blog will discuss 6 techniques (in order of adherence to best practices)that can be used to center align an element and when to use each one. Here, center align refers to placing the element at the horizontal and vertical center of its parent.
.center class represents the element to be center aligned
.parent represents its parent element.
The idea is to use absolute positioning with top and left - 50% and then applying negative transform. The value used in top and left are resolved based on dimensions of the parent while the value in the translate method is resolved based on the dimensions of the element itself.
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}The idea is to make the parent container a flexbox and center the element along the horizontal and vertical directions using flex properties as follows.
.parent {
display: flex;
justify-content: center;
align-items: center;
}When there are multiple elements that need to be stacked one above the other such that the stack is at the center, we simply add the following line:
flex-direction: column;The idea is to again use absolute positioning similar to the transform technique but we apply a negative margin of half the element's width and height instead of translate.
$w: 200px; // SCSS Variable
$h: 100px; // SCSS Variable
.center {
position: absolute;
top: 50%;
left: 50%;
margin: -50px -100px; // Negative margin of half the
// width and height
}To make this code more generic, we use the calc() property as follows:
(#{$h} / 2) - Half the height
(#{$h} / 2) * -1) - Negated value of half the height
Which gives us:
margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1);I recently discovered this cool technique from css-tricks.com
The idea is to create a grid container and set the margin to auto. In a non-grid container, when margin is set to auto, margin-top and bottom take the value 0.
However, in a grid container, margin-top and bottom is assigned the available space evenly, thus centering the element.
.parent {
display: grid;
}
.center {
margin: auto;
}Another way to center using grid, pointed out by Jacob:
.parent {
display: grid;
place-items: center;
}This technique is not recommended for center-align but it works.
The idea is to set a fixed vertical padding for the container with fixed height is known and allow the child element to occupy max height and margin auto.
.parent {
height: 600px; //Fixed height
padding: 200px 0; //Fixed vertical padding
}
.center{
margin: 0 auto;
height: 100%; // Child takes max height
}This technique is very rarely used today and may raise eyebrows. However, it does work.
The idea is to force the parent to behave like a table cell using display. We then use vertical align property for vertical centering and margin auto for horizontal centering.
.parent {
display: table-cell;
vertical-align: middle;
}
.center{
margin: auto;
}This concludes the 6 ways to center align elements.
Horizontal centering is often used in title styles and footers in combination with an even padding or margin.
.parent {
text-align: center;
}It can also center block type child elements but it is not a recommended practice.
.center {
margin: 0 auto;
}Here is a working Codepen demo of all the above techniques.
Let me know in the comments if there are any more techniques that you have used/explored. Also, follow me on Twitter for more dev content!
35