How to Center Elements in CSS 💡

Hello guys ✌️

It's been a while since we've had any Web-related Content, hasn't it? Well, I'm back now.

Every now and then, Developers run into one particular headache when writing code: getting Elements centered exactly the way you want. Even at an Advanced Level, you sometimes end up searching for the code just to center something.

In this post, I'll show you 9 ways to center Elements, each with a little code Snippet. These are what I actually use in real time, so you can try them out yourself. If you can't look through them right now, you can Save this for later. I hope something here helps you out.

Parent-Child Classification: the markup every snippet uses, <div class="parent"> holding <div class="child"></div>.

Flexbox and align-self

Snippet 1: .parent { display: flex; justify-content: center; } .child { align-self: center; }

Absolute position and translate

Snippet 2: .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Grid and place-items

Snippet 3: .parent { display: grid; place-items: center; }

Grid, justify-content and align-items

Snippet 4: .parent { display: grid; justify-content: center; align-items: center; }

Flexbox and an auto margin

Snippet 5: .parent { display: flex; } .child { margin: auto; }

Flexbox, align-items and justify-content

Snippet 6: .parent { display: flex; align-items: center; justify-content: center; }

Inset 0 and an auto margin

Snippet 7: .parent { position: relative; } .child { position: absolute; inset: 0; margin: auto; }

Grid, align-self and justify-self

Snippet 8: .parent { display: grid; } .child { align-self: center; justify-self: center; }

Grid and place-self

Snippet 9: .parent { display: grid; } .child { place-self: center; }

See you again in the next post.

Good Bye Everyone 💗

Hello guys ✌️

ကျွန်တော်တို့ Web နဲ့သက်ဆိုင်တဲ့ Content တွေနဲ့မတွေ့ရတာကြာပြီနော်။ အခုပြန်လာပါပြီ

တစ်ခါတလေမှာ Developer အတွက် codeရေးတဲ့အခါအခက်အခဲတစ်ခုရှိတတ်ပါတယ်။ လိုချင်သလို Elements တွေကို Center ကိုပို့ချင်တဲ့အခါပါ။ Advanced Level မှာတောင်တစ်ခါတလေ center ပို့ဖို့ကို code လိုက်ရှာနေရတာမျိုးတွေရှိပါတယ်

ဒီ content မှာကတော့ မိတ်ဆွေတို့ကို Center ကို Elements တွေပို့လို့ရမယ့် Code (၉) မျိုးကို Snippet လေးတွေနဲ့ပြပေးပါ့မယ်။ တကယ့် real time မှာ သုံးနေတာမို့လို့ လိုက်စမ်းလို့လည်းရပါတယ်။ အခုမကြည့်နိုင်သေးရင်လည်း Save ထားလို့ရပါတယ်။ တစ်ခုခုအထောက်အကူရသွားလိမ့်မယ်လို့မျှော်လင့်ပါတယ်