در این مقاله قصد آموزش یک ترفند CSS را دارم که فکر میکنم خیلی از طراحان وب هنوز با آن مشکل دارند. هنوز هیچ دستور مشخصی برای قرار دادن یک عنصر div دقیقا در وسط صفحه‌ی مرورگر وجود ندارد. بسیاری از وبسایتها و صفحات را دیده‌ام که برای این کار از درصدهای نه چندان دقیق استفاده میکنند. برای مثال div خود را به فاصله‌ی ۴۰٪ از بالا و سمت راست یا چپ قرار میدهند که اگر ما اندازه‌ی صفحه نمایش را تغییر دهیم با تغییراتی در محل قرار گیری عنصر مواجه می‌شویم. اما با استفاده از ترفند امروز دیگر این مشکل به وجود نخواهد آمد.برای این کار، ما یک باکس به اندازه ۲۰۰px در ۱۰۰px را دقیقا در وسط صفحه‌ی مرورگر قرار میدهیم و مشاهده میکنیم که علیرغم تغییر اندازه صفحه نمایش، مکان باکس ما تغییری نمیکند.
برای ساخت باکس و قرار دادن آن در وسط صفحه از کد زیر استفاده میکنیم:
.box {
width: ۲۰۰px;
height: ۱۰۰px;
top: ۵۰%;
left: ۵۰%;
position: absolute;
margin: -۵۰px ۰ ۰ -۱۰۰px;
} اما در کد بالا چه اتفاقی می‌افتد؟
ما با دستورهای width و height طول و عرض باکس ساخته شده را مشخص میکنیم. با دستورهای top و left مشخص میکنیم که از سمت بالا و سمت چپ به اندازه‌ی ۵۰ درصد کل صفحه‌ی نمایش فاصله پیدا کند. با دستور position: absolute هم مکان باکس را تثبیت میکنیم. اما اگر با همین کدها دستور را به پایان برسانیم باکس ما دقیقا در وسط صفحه جای نمیگیرد پس باید کدهای بعدی را که همان دستور margin است را اضافه کنیم. نکته‌ی کلیدی و ترفند ما در همینجاست. در تعیین فاصله ما مجبوریم که از مارجین منفی استفاده کنیم. مقدار margin هم دقیقا باید نصف طول و عرض باکس باشد تا به درستی نمایش داده شود. در اینجا چون ما ارتفاع باکس را ۱۰۰px در نظر گرفته‌ایم پس margin را از سمت بالا منفی ۵۰px مشخص میکنیم و برای طول باکس هم همینطور.
آموزش به پایان رسید. نمونه ی کار را میتوانید در لینک زیر ببینید.

مشاهده نمونه کار

موفق و پیروز باشید.