‏وسط‌چین کردن div؛ این‌بار وسطِ واقعیِ پنجره

نویسنده تو این پست از یه نکتهٔ ساده شروع می‌کنه: وسط‌چین کردن یه المان که قبلاً به position: absolute و translate(-50%, -50%) نیاز داشت، حالا با گرید تقریباً به‌طور ناامیدکننده‌ای آسون شده.

body {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

ولی خودش می‌گه همین کد فقط تا وقتی خوب کار می‌کرد که مرورگر رو با سایدبار باز کرد. المان هنوز کاملاً وسط بود، فقط وسطِ مستطیل اشتباه: ویوپورت به‌خاطر سایدبار باریک‌تر شده بود و «وسط» صفحه دیگه وسط پنجره نبود. چیزی که نویسنده می‌خواست این بود که یه چیدمان باریک دقیقاً وسط پنجره بشینه، نه وسط فضای باقی‌مونده کنار سایدبار.

راه‌حل اولش ساده بود: اختلاف window.outerWidth و window.innerWidth عرض رابط مرورگر رو می‌ده و می‌شه المان رو به اندازهٔ نصف این اختلاف جابه‌جا کرد. این جواب داد تا وقتی DevTools رو باز کرد؛ اون موقع اختلاف عرض شامل رابط مرورگر از هر دو طرف می‌شد و هیچ راهی نبود که بفهمه این مقدار چطور بین چپ و راست تقسیم شده.

مختصات گمشده رو در نهایت خود اشاره‌گر بهش داد. یه رویداد معتبر اشاره‌گر هم می‌دونه کجای صفحه‌نمایشه و هم کجای ویوپورت، و همین برای پیدا کردن جای ویوپورت داخل پنجره کافیه.

const viewportLeft = event.screenX - event.clientX * scale;
const viewportRight = viewportLeft + innerWidth * scale;
const left = viewportLeft - window.screenX;
const right = window.screenX + outerWidth - viewportRight;
const shift = (right - left) / (2 * scale);

به گفتهٔ نویسنده فایرفاکس همین موقعیت ویوپورت رو مستقیم در اختیار می‌ذاره ولی کرومیوم نه، برای همین اصلاح کار با یه حدس دربارهٔ جای سایدبار شروع می‌شه و به‌محض این‌که اشاره‌گر وارد صفحه بشه دقیق می‌شه. آخرش هم کل ماجرا رو برد توی یه افزونهٔ مرورگر به اسم center, actually؛ چون به نظرش این یه ترجیح شخصیه و باید کاربر خودش انتخابش کنه، نه این‌که یه سایت برای همه تصمیم بگیره.

نکات کلیدی:

• با display: grid و place-items: center وسط‌چین کردن به چند خط CSS خلاصه می‌شه
• سایدبار مرورگر ویوپورت رو باریک‌تر می‌کنه، پس «وسط ویوپورت» با «وسط پنجره» فرق داره
• اختلاف outerWidth و innerWidth فقط مجموع رابط مرورگره، نه سهم هر طرف
• مختصات screenX و clientX یه رویداد اشاره‌گر، جای ویوپورت داخل پنجره رو مشخص می‌کنن
• فایرفاکس این موقعیت رو مستقیم می‌ده، کرومیوم نه
• نتیجهٔ کار افزونهٔ center, actually شد تا انتخاب دست کاربر باشه، نه دست سایت