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

زمانی که یا المان یا یک 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

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