CSS দিয়ে এলিমেন্ট সেন্টার করা (হরিজন্টাল, ভার্টিক্যাল, এবং উভয়)

CSS-এ এলিমেন্ট সেন্টার করা যতটা কঠিন মনে হয়, ততটা কঠিন নয়—বিশেষ করে হরিজন্টাল এবং ভার্টিক্যাল দুটোই একসাথে করলে। আজ আমি পুরনো এবং আধুনিক (Flexbox, Grid) সব পদ্ধতি দেখাব।

টেক্সট এলিমেন্ট হরিজন্টালি সেন্টার

h1 { text-align: center; }

যেকোনো টেক্সট এলিমেন্টে কাজ করে।

ব্লক এলিমেন্ট (নন-টেক্সট) হরিজন্টালি সেন্টার

.center-horizontal { 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* বা max-content */ 
}

width সেট করা আবশ্যক। ফিক্সড প্রস্থ না চাইলে width: max-content ব্যবহার করুন।

Block vs Inline-Block Elements

<button> ডিফল্টভাবে inline-block। ব্লক এলিমেন্টে কনভার্ট করতে:

.center-horizontal { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; 
}

Flexbox-এ হরিজন্টাল সেন্টার

.center-horizontal { display: flex; justify-content: center; }

<button> এবং <img> ফ্লেক্স-কন্টেইনার হতে পারে না, কিন্তু ফ্লেক্স-আইটেম হতে পারে। তাই প্যারেন্ট <div>-এ ফ্লেক্স প্রপার্টি দিয়ে চাইল্ডকে সেন্টার করুন:

<div class="center-horizontal"><button>Center me</button></div>

ভার্টিক্যালি সেন্টার (পুরনো পদ্ধতি)

margin-top/bottom: auto কাজ করে না। প্যারেন্টে ফিক্সড হাইট লাগে।

<section class="section"><div class="center-vertical">Center me vertically</div></section>

.section { height: 200px; border: 1px solid black; } 
.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }

Flexbox-এ ভার্টিক্যাল সেন্টার

.section { height: 200px; border: 1px solid black; display: flex; align-items: center; }

হরিজন্টাল + ভার্টিক্যাল উভয় সেন্টার (পুরনো পদ্ধতি)

.section { height: 200px; border: 1px solid black; } 
.center-vertical-and-horizontal { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; }

Flexbox-এ উভয় সেন্টার

.section { height: 200px; border: 1px solid black; display: flex; align-items: center; justify-content: center; }

justify-content: center হরিজন্টাল, align-items: center ভার্টিক্যাল।

CSS Grid-এ উভয় সেন্টার (সর্বাধিক আধুনিক)

.section { height: 200px; border: 1px solid black; display: grid; place-items: center; }

শুধু ২টি প্রপার্টি! কিন্তু CSS Grid এখনো সব ব্রাউজার/সিএমএস (যেমন WordPress)-এ ফুল কম্প্যাটিবল নয়।

CSS দিয়ে এলিমেন্ট সেন্টার করা (হরিজন্টাল, ভার্টিক্যাল, এবং উভয়)—পুরনো ও আধুনিক পদ্ধতি