ফ্লেক্সবক্সে `justify-content: center` (হোরিজন্টাল) এবং `align-items: center` (ভার্টিক্যাল) ব্যবহার করে এলিমেন্টকে দুটি অক্ষেই কেন্দ্রে আনন্দা যায়।
উদাহরণ: ফ্লেক্সবক্স কেন্দ্রিকরণ
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.h-container {
display: flex; width: 300px; height: 300px;
background-color: lightblue; justify-content: center; align-items: center;
border: 2px solid black;
}
.h-1 { font-size: 30px; width: 150px; height: 150px; background-color: red; color: white; border: 2px solid rgb(58, 2, 83); }
</style>
</head>
<body>
<h2>ফ্লেক্সবক্স দিয়ে হোরিজন্টাল ও ভার্টিক্যাল কেন্দ্রিকরণ</h2>
<div class="h-container"><div class="h-1">কেন্দ্রে থাকা ডিভ</div></div>
</body>
</html>
কোড ব্যাখ্যা
- display: flex: ফ্লেক্স কন্টেইনার।
- justify-content: center: মেইন অ্যাক্সিস (হোরিজন্টাল) এ কেন্দ্রে।
- align-items: center: ক্রস অ্যাক্সিস (ভার্টিক্যাল) এ কেন্দ্রে।
- height: 300px: কন্টেইনার উচ্চতা থাকলে ভার্টিক্যাল কেন্দ্রিকরণ দৃশ্যমান হয়।
সिंगেল আইটেমের জন্য
আইটেমে `margin: auto` দিয়েও দুটি অক্ষেই কেন্দ্রে আনন্দা যায়।
