10 ways to Center a Div: CSS Positions.
Hello guys. Let’s talk about a common dreaded topic in web-design: “How do I center a div in CSS?”.
In this post, I’ll show you 10 ways you can center a div.
Why this article?
Centering a div is surprisingly a challenge to most frontend and full-stack developers, this have commonly been portrayed in memes, have been the headline in many posts, sometimes used as an assessment to qualify for a front-end developer role. I wish someone will give me this task to qualify for a front-end role. 😋
But what is so dreadful about centering a div? Or should I say positioning a div? By the end of this post, you should be able to center a div in as many ways as you can imagine. Trust me, Centering/Positioning a div is not as hard as you might have heard. Follow along.
You might be wondering where’s the code to centering a div? Don’t worry, this is not a scam. We’ll get to the code in a minute. First, it’s good to have a proper understanding of the code being written, so you could replicate it in your project with ease, then dynamically manipulate as you wish.
Without delay, let’s talk about CSS positions, then the code.
CSS
CSS is an interesting “language”. It’s easy to grasp and has been the beauty of html — literally. As fun as web development is, the design phase with CSS is usually the fun part and the enjoyable part. As easy as I make this sound, it’s not that easy if you don’t understand the rules of CSS, but once you understand the rules, you are golden. One of the most important of CSS rules is the positioning rules, which if you understand makes you write better CSS.
CSS Positions
CSS have 5 major position types:
a. Static
b. Relative
c. Absolute
d. Fixed
e. Sticky
As I mentioned earlier, centering a div is simply positioning a div at the center of another container. Have this in mind as I explain these CSS types.
a. Static Position
Static position is as the name implies, there’s not much to say about this position type in this post. Just that all html elements have position: static by default.
b. Relative Position
This is the most wildly used position type in CSS. If you know your CSS, you will almost always set your html elements as relative position when defining your CSS. The Relative Position is as the name implies; it means two things:
i). Position this element relative to its siblings. i.e., follow the flow of its siblings whether block or inline flow.
That means if I have element A, B and C as siblings, and I set element B as relative, it simply means that element B will be relative to its siblings which are elements A and C.
ii). Position this element relative to its children. i.e., become a defined scope for its children.
Meaning; if I have div A, and div B is the child of div A, once I set position: relative on div A, div B becomes automatically scoped to div A. Even if I set position: absolute on div B. It is still scoped to div A and cannot overflow out of div A.
c. Absolute Position
The absolute position is the trickiest of all the positions in CSS. It is the most flexible, which makes it the most powerful of all the positions in CSS. Position: absolute simply means:
Position me at the top-left of the root element (the body element) but if I’m inside a parent with position: relative, position me at the top-left of that parent element.
In more broad terms, it means: once you define position: absolute on any element, it first checks if it’s direct parent have position: relative defined and stays at the top-left position of that parent element, but if the direct parent doesn’t have position: relative defined, it checks upward to the next parent element for position: relative, and so on until it gets the root element i.e., the body element, but if it finds a parent element with position: relative while moving up the dom tree, it positions itself at the top-left of that element and becomes scoped to that element.
d. Fixed Position
The Fixed position have no respect for the rules that guides CSS positions. It is the rogue type of CSS positions.
The position: fixed is the only CSS position type that cannot exist inside any other position type. It cannot be scoped within any other position type, but all other position types can be scoped within it.
Simply means that the way position: relative scopes the position: absolute, position: fixed cannot be scoped that way. That is why it is the go-to choice when designing modals which stay fixed on the screen until an action is performed.
e. Sticky Position
Sticky as the name implies, sticks to wherever you define it to be. This position type assumes two position states: a relative position and a fixed position. It is first a relative positioned type until you get to the position where you’ve asked it to be stuck to. Then it becomes fixed to that defined position.
The Code
Now that you have an understanding of how positioning works which translates to how to center or position elements in CSS, let’s see these positions in code.
For the 10 ways to Center a div, I’ll leave a link to it on codepen.io, where you can see the code and the result side by side.
Hint: I used four of the position types to center a div, including the sticky position type.
Here’s the link to the code.
10 ways to Center a Div (codepen.io) (https://codepen.io/MayowaObisesan/pen/QWVVzMJ)
Conclusion
I hope this post have given and will give you the courage to tackle any positioning challenge in CSS; be it centering a div, animating a div, dynamically positioning an element within its parent or any kind of div manipulation you wish on a webpage. Doesn’t matter what kind of positioning challenge really, it all boils down to CSS positions, (and the unavoidable CSS display properties).
If you find this post helpful. Send it to that someone you know needs this to become a boss at CSS.
In my next post about CSS, I’ll talk about CSS display types (- inline, block, flex, grid, etc.) and why they matter for great web design. Follow so as not to miss that post.
Take care everyone.
Thanks for reading. 🙂
God Bless.