موقعیت دهی یک عنصر دقیقا در وسط صفحه‌ی مرورگر با استفاده از CSS

در این مقاله قصد آموزش یک ترفند 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 مشخص میکنیم و برای طول باکس هم همینطور.
آموزش به پایان رسید. نمونه ی کار را میتوانید در لینک زیر ببینید.

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

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

اشتراک‌گذاری این مطلب

11 دیدگاه در “موقعیت دهی یک عنصر دقیقا در وسط صفحه‌ی مرورگر با استفاده از CSS”

  1. با سلام و تشکر از مطلب شما
    این آموزشی که لطف کردید مربوط به موقعیت ثابت یک شیئ در صفحه است یعنی:
    position: absolute
    اما اگر بخواهیم در حالت نسبی این کار را انجام بدهیم چه کار باید بکنیم؟
    یعنی
    position:reletive
    ??!!
    با تشکر

  2. سلام…آقا فرهاد من این روشو امتحان نکردم ولی خودم همیشه megine رو auto میزارم و خودش وسط صفحه قرار میگیره و مشکلی نداره..ولی بازم مرسی از این روش جدید ک گفتید

  3. بله دوست من. با Auto کردن margin این کار انجام میشود ولی در برخی مرورگرها درست کار میکنه. و این روشی که من گفتم حتی از بالا و پایین و فاصله رو دقیقا نصف میکنه که با margin: auto; نمیشه این کار رو کرد

  4. سلام . خسته نباشید!
    برادر ، اگه بخوایم چند باکس رو وسط قرار بدیم باید چی کار کنیم ؟!

  5. برای این کار همه باکس‌ها رو داخل یک div قرار بدید یا اینکه از جاوا برای اینکار استفاده کنید.

  6. سلام
    من خودم از margin 0 auto استفاده می کنم که به نظرم بهتر و ساده تره
    ممنون از سایت خوبتون

دیدگاه‌ها غیرفعال هستند.