مرکز div در CSS یک کار متداول است که بسته به نیاز شما می تواند به روش های مختلفی انجام شود. این که آیا شما نیاز به مرکز آن به صورت افقی ، عمودی یا هر دو دارید ، در اینجا پنج روش مؤثر برای دستیابی به این هدف وجود دارد:
1 با استفاده از Flexbox
Flexbox یکی از ساده ترین و قدرتمندترین راه ها برای مرکز A است divبشر
.container {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
height: 100vh; /* Full viewport height */
}
این روش کاملاً برای محوریت هم به صورت افقی و هم به صورت عمودی در یک ظرف والدین کار می کند.
2. با استفاده از طرح شبکه
شبکه CSS همچنین یک روش ساده برای مرکز a فراهم می کند divبشر
.container {
display: grid;
place-items: center;
height: 100vh;
}
در place-items: center; املاک کودک را هم به صورت افقی و هم به صورت عمودی متمرکز می کند.
3 با استفاده از موقعیت و تبدیل
اگر ترجیح می دهید از موقعیت یابی مطلق استفاده کنید ، می توانید با محوریت دست پیدا کنید transformبشر
.container {
position: relative;
height: 100vh;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
این حرکت می کند div به مرکز در حالی که اطمینان حاصل می کند کاملاً تراز شده است.
4. با استفاده از اتومبیل حاشیه (فقط برای مرکزیت افقی)
اگر فقط نیاز دارید یک عنصر سطح بلوک را به صورت افقی متمرکز کنید ، margin: auto; یک رویکرد ساده است.
.child {
width: 200px;
margin: 0 auto;
}
این روش کار می کند زیرا عناصر بلوک به طور پیش فرض عرض کامل ظرف خود را به خود اختصاص می دهند.
5 با استفاده از صفحه نمایش جدول
تنظیم والدین به عنوان یک جدول و کودک به عنوان یک سلول میز ، محوریت عمودی را امکان پذیر می کند.
.container {
display: table;
width: 100%;
height: 100vh;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
این روش یک تکنیک میراث است اما در برخی موارد هنوز هم می تواند مفید باشد.
پایان
هر یک از این روشها موارد استفاده خود را دارند. Flexbox و Grid برای اکثر برنامه ها مدرن و بسیار توصیه می شوند ، در حالی که روش های موقعیت یابی و نمایش جدول در سناریوهای خاص مفید هستند. یکی را انتخاب کنید که متناسب با نیازهای طراحی شما باشد!
