The nicest thing about CSS is that one problem can be solved in many ways. It doesn’t matter that you don’t know all the possibilities - you won’t struggle to find your way out of the problem.
However, you can be prepared by already knowing that it is possible to solve what you have at hand in many ways, as long as you are creative. Today we will walk through a simple and common situation you will encounter in your project: how to center your div
element.
option I
This will horizontally align the block to the center of the parent. You can also add width
to your .child
to prevent it from stretching out to the edges of the .parent
.
.parent {
display: flex;
}
.child {
margin: auto;
}
option II
Probably one of the first solutions you’ll learn when aligning items because of its simplicity. align-items
will pack the items vertically to the center, while justify-content
will take care of the horizontal part.
.parent {
display: flex;
align-items: center;
justify-content: center;
}
option III
Setting the top
and the bottom
may look pretty straightforward. However, if you stop there, the browser will just center the element’s edges and it will display it off-center. Adding the transform
property will solve that issue.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
bottom: 50%;
transform: translate (-50%, -50%);
option IV
You may look to find a way to write as little code as possible in your project when that’s possible. Using the place-items
shorthand property, which will align your item both vertically and horizontally, you’re basically getting rid of setting the block and inline directions (align-items
& justify-content
)
.parent {
display: grid;
place-items: center;
}
option V
Last in line for today is another shorthand property called inset
, which can help you center your div
element. margin: auto
will behave as in the first example, while inset
corresponds to top
, bottom
, left
and right
.
.parent {
position: relative;
}
.child {
position: absolute;
inset: 0;
margin: auto;
}
Although they are far from being the only options when centering the div
elements in your CSS, I hope you’ll make use of them throughout your exploration.
Can you think about another way you can center
your div
next time? 🤓
Cover photo by Alejandro Barba on Unsplash
Top comments (0)