CSS Horizontal & Vertical Align

تراز افقی و عمودی در CSS آورده شده است:

—

 ۱. استفاده از Flexbox (جدید و پرکاربردترین روش)

 تراز وسط هم به صورت افقی و عمودی:

“`css

.container {
display: flex;
justify-content: center; /* تراز افقی */
align-items: center; /* تراز عمودی */
height: 200px; /* ارتفاع ظرف */
}
“`

—

 ۲. استفاده از Grid

“`css

.container {
display: grid;
place-items: center; /* کوتاه شده align-items و justify-items */
height: 200px;
}
“`

—

۳. استفاده از Position و Transform (برای موقعیت‌دهی مطلق)

“`css

.container {
position: relative;
height: 200px;
}

.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, –50%);
}
“`

—

 ۴. تراز افقی برای عناصر درون‌خطی (inline) با استفاده از text-align

“`css

.container {
text-align: center; /* تراز افقی برای عناصر inline یا inline-block */
}
“`

—

 ۵. تراز عمودی برای عناصر inline یا table-cell

“`css

.container {
display: table-cell;
vertical-align: middle;
height: 200px;
}
“`

یا برای عناصر درون‌خطی:

“`css

.element {
vertical-align: middle;
}
“`