بوت‌استرپ یکی از محبوب‌ترین فریمورک‌ها برای ساختن سایت‌های ریسپانسیو هست که خصوصیات زیادی برای طراحی آسان و سریع داره. یکی از قابلیت‌های جالبش فراهم کردن روش‌های ساده برای مرکزگذاری عنصرها مثل div به صورت عمودی و افقی در صفحه است. تو این توضیح می‌خوایم با یک مثال عملی بهت نشون بدیم چجوری می‌تونی یک div رو به صورت عمودی توی صفحه مرکزگذاری کنی.
اولین قدم این هست که مطمئن بشی بوت‌استرپ به درستی تو پروژه‌تات اضافه شده باشه. همین که این کار رو انجام دادی، استفاده از امکانات بوت‌استرپ برای مرکزگذاری عناصر خیلی ساده میشه. یک روش رایج برای این کار استفاده از flexbox و کلاس‌های بوت‌استرپ هست که عملکرد خیلی خوبی داره.
در مثال زیر، یک ساختار ساده با استفاده از بوت‌استرپ داریم که یک div رو به صورت عمودی در وسط یک صفحه قرار می‌ده. به لطف کلاس‌های از پیش تعیین شده بوت‌استرپ، فقط با استفاده از چند کلاس به این هدف می‌رسیم.
برای ایجاد یک مرکز عمودی، معمولا از کلاس‌های .d-flex، .justify-content-center و .align-items-center استفاده می‌کنیم. این کلاس‌ها از سیستم flexbox بهره می‌برن و به راحتی می‌تونن عناصر رو به صورت عمودی و افقی در راستای هر دو محور محوردهی کنن.
این کار باعث میشه که بتونی به راحتی div های مختلف رو توی صفحه هم‌راستایی کنی و ظاهری مرتب و قشنگ به سایتت بدی، بدون اینکه با css توی تگ‌های مختلف ور بری یا از روش‌های قدیمی‌تر استفاده کنی.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>مرکزگذاری عمودی با بوت‌استرپ</title>
</head>
<body>
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="p-5 bg-light">مرکزگذاری عمودی</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
اضافه کردن بوت‌استرپ به پروژه با استفاده از CDN
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
ایجاد یک div که به صورت flexbox و به طور کامل صفحه رو به خودش اختصاص می‌ده
.justify-content-center
مرکزگذاری افقی المان‌ها درون div
.align-items-center
مرکزگذاری عمودی المان‌ها درون div
style="height: 100vh;"
تنظیم ارتفاع div به اندازه تمام ارتفاع صفحه مرورگر برای مرکزگذاری عمودی کامل