সেন্টারিং ইলিমেন্টস : সিএসএসে যেকোনো ইলিমেন্ট সেন্টার Flexbox এর সাহায্যে!

আগে কোনো ওয়েবপেজ ডিজাইনের সময় আমি সবচেয়ে বেশি যে সমস্যাটায় ভুগতাম, সেটা হলো: Element's Centering. কিন্তু এখন তার উল্টো। এখন আমি কোনো কিছু ডিজাইন করার সময় অপেক্ষায় থাকি কখন কোনো কিছু সেন্টার করতে হবে!😄

হ্যাঁ, আগে এই কাজটা সত্যিই খুব কঠিন ছিল। Horizontal Centering মোটামুটি করা গেলেও Vertical-এ এসে মাথা পাগলের কাছাকাছি চলে যেত। তখন আমরা বিভিন্ন Hacky CSS লিখতাম!
তাও একেকটা একেক ইলিমেন্টের ক্ষেত্রে কাজ করত আধামাধা করে। পারফেক্ট হতো না কোনোটাই!😞 কিন্তু সেই প্রস্তর যুগ শেষ!!! ফ্লেক্সবক্স সেন্টারিং নিয়ে সব মুশকিল আসান করে দিয়েছে, দিয়েছে এর যুগান্তকারী সমাধান।😤

আমি ভুল না হলে, তুমিও একই সমস্যায় ভুগ। তাহলে চলো এই বিপদ থেকে উত্তরণের উপায় কী, তা দেখে আসি।

Horizontal Centering

চলো একটা div দিয়ে শুরু করি, যার দুটি p ইলিমেন্ট আছে।

<div>
<p>Furr!</p>
<p>Jaa!</p>
</div>

তো এখন এটাকে হরাইজন্টালি সেন্টার করতে আমরা div কে display: flex দিব। তারপর এর justify-content এর ভ্যালু center করে দিব।

div {
  display: flex;
  justify-content: center;
}

ব্যাস, আমাদের প্যারাগ্রাফ দুটি এখন Horizontally Centered!

Vertical Centering

ভার্টিক্যাল সেন্টারিং-ও ফ্লেক্সবক্স দিয়ে খুবই সোজা!
জাস্ট align-items: center করে দিলেই হবে। চেষ্টা করে দেখো তো।…

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

কী হয় না? যদি body-র সাপেক্ষে ভার্টিক্যালি সেন্টার করতে যাই, তাহলে আমাদের একটা কাজ করতে হবে, body-র height এর ভ্যালু 100vh করে দিতে হবে।

body {
  height: 100vh;
}

Perfect Centering

কাজ শেষ। এখন দেখ তো চেষ্টা করে… কাজ হয়েছে? হলে তো ভালোই, না হলে কমেন্ট বক্সে সাহায্য চাইতে পার।
তো আজকে আসি?😊
আসসালামু আলাইকুম!♥