‫روش جدید برای مرکز کردن عناصر مطلق در CSS

مقاله‌ای در CSS-Tricks به معرفی روشی جدید برای مرکز کردن عناصر با موقعیت‌دهی مطلق (absolute positioning) در CSS می‌پردازد. این روش با استفاده از ویژگی‌های place-self و inset در سه خط کد امکان‌پذیر است و در تمامی مرورگرها به درستی کار می‌کند. روش سنتی برای مرکز کردن عناصر مطلق شامل تعیین موقعیت top و left به 50% و سپس استفاده از translate: -50% -50% برای جابجایی عنصر به مرکز است. اما روش جدید با بهره‌گیری از ویژگی‌های align-self و justify-self که به تازگی برای عناصر مطلق نیز پشتیبانی می‌شوند، این کار را ساده‌تر می‌کند. این ویژگی‌ها در واقع عنصر را در داخل "بلوک حاوی با تغییرات inset" (IMCB) تراز می‌کنند. بلوک IMCB با تنظیم ویژگی‌های inset (شامل top, right, bottom, و left) ایجاد می‌شود. به طور پیش‌فرض، اندازه IMCB برابر با اندازه عنصر است. با تنظیم ویژگی‌های inset به 0، IMCB به اندازه بلوک حاوی (containing block) تغییر می‌کند و در نتیجه، ویژگی‌های place-self می‌توانند عنصر را به درستی در مرکز قرار دهند. این روش نه تنها برای مرکز کردن مناسب است، بلکه امکان قرار دادن عنصر در موقعیت‌های دیگر را نیز فراهم می‌کند. نویسنده مقاله پیشنهاد می‌کند که برای ایجاد فاصله بین عنصر مطلق و بلوک حاوی، می‌توان از margin برای عنصر یا تنظیم ویژگی‌های inset برای بلوک حاوی استفاده کرد. این روش یک راه حل ایده‌آل و مدرن برای مرکز کردن عناصر مطلق در CSS است و به توسعه‌دهندگان CSS کمک می‌کند تا کدهای تمیزتر و قابل فهم‌تری بنویسند.