ژوپین
  1. خانه
  2. بلاگ
  3. آموزش
  4. فرانت اند(اhtml-css-javascript)
  5. قرار دادن div یا باکس در مرکز صفحه در حالت شناور یا fixed

قرار دادن div یا باکس در مرکز صفحه در حالت شناور یا fixed

آموزشفرانت اند(اhtml-css-javascript)

نکات مهم این مطلب

شناور کردن باکس در مرکز صفحه با css

چگونه یک div را در وسط قرار دهیم؟

زمانی که یا المان یا یک div را در css در حالت position:fixed یا position:absolute قرار میدهیم ، برای تغییر مکان آن از دستور های left - right - top - botton استفاده می کنیم.


در حالت absolute مقادیر بالا نسبت به نزدیکترین المان پدر که position:relative دارد تعیین می شود و در حالت position:fixed نسبت به صفحه یا window

خب اینکه ساده است ما اگر بگوییم مثلا از بالا یا top اندازه 50% و از left اندازه 50% مکان گیری کند باید دقیقا در وسط قرار گیرد ولی خیر...... اینجور نیست زیرا مقادیر top و left یا bottom و right و کلا همه اینها از لبه المان پدر مورد نظر مثلا left تا لبه المان ما است و برای top هم همینجور پس با این اوصاف وسط قرار نمی گیرد.


لینک زیر را مشاهده کنید تا دموی مثال بالا را زنده ببینید.

https://codepen.io/zhupin/pen/QWJexxR


برای اینکه دقیقا در مرکز قرار گیرد باید مرکز المان ما با مرکز المان پدر متحد المرکز شود که برای این کار کافیست از transform:translate استفاده کنید و از بالا و پایین به مقدار -50% عقب بکشیم. 


لینک زیر نیز حاوی مثال بالا و کد های لازم است .


https://codepen.io/zhupin/pen/wvQVXEN


 


کامنت و لایک فراموش نشه.


نظرات



ارسال نظر

جهت قرار دادن کد در متن کامنت ، متن مورد نظر را انتخاب کنید و دکمه بالا را بزنید

گفتگو با پشتیبان