چطوری یک کانتینر رو به صورت عمودی در بوت استرپ وسط چین کنیم؟
How to vertically center a container in Bootstrap 5?
سلام من دارم از بوت‌استرپ استفاده می‌کنم و می‌خوام یه کانتینر رو به صورت عمودی توی صفحه وسط چین کنم. میخواستم بدونم بهترین راه برای این کار چیه؟
سلام برای اینکه یک کانتینر رو توی بوت استرپ به صورت عمودی وسط چین کنی، میتونی از کلاس‌های کمکی ای که بوت داره استفاده کنی. ساده‌ترین و بهترین راه اینه که از ترکیب کلاس‌های Flexbox استفاده کنی. من یه مثال ساده برات میزنم که بفهمی چطور میتونی این کار رو انجام بدی:
<div class="d-flex justify-content-center align-items-center vh-100"> <div class="p-5 bg-light"> <h1>کانتینر</h1> </div> </div>
از d-flex, justify-content-center و align-items-center برای استفاده از قابلیت Flexbox استفاده می‌کنیم.
vh-100 به کانتینر بیرونی اجازه میده که ارتفاعش برابر با 100 درصد ارتفاع ویوپورت باشه، که باعث میشه کانتینر در مرکز عمودی قرار بگیره.
در نهایت، justify-content-center باعث میشه که کانتینر به صورت افقی وسط‌چین بشه و align-items-center هم اونو به صورت عمودی وسط چین می‌کنه.