آموزش قرار دادن صفحه اینترو در وسط صفحه به صورت درصدی

[مـرادی 155]

سلام به همه دوستان جومینایی

امروز قصد آموزش تکنیکی از سی اس اس رو داریم که خیلی از دوستان نیاز به این تکنیک دارند

تا صفحه اینترو سایت رو درست در وسط صفحه قرار بدهند

شاید بگویید که خوب margin:auto قرار میدهیم و تگ مورد نظر در وسط صفحه قرار میگرد

خب این درست هست ولی این مورد برای قرار دادن صفحه در وسط از لحاظ عرض صفحه هست

نه ارتفاع صفحه!!

ما میخواهیم که تگ اینترو ما هم از عرض و هم از ارتفاع درست در وسط صفحه قرار گیرد

ما فرض میکنیم که تگ اصلی مربوط به صفحه اینترو ما دارای ابعاد زیر هست:

width:400;
height:300px;

خب برای اینکه تگ مورد نظر رو در وسط صفحه قرار بگیرد

از کد زیر استفاده می کنیم:

#twd-main {
   background-color: #000;
   height: 300px;
   width: 400px;
   left: 50%;
   top: 50%;
   margin-left: -200px;
   margin-top: -150px;
   position: absolute;        
}

حالا تگ ما که دارای آی دی(id)

twd-main هست در وسط صفحه قرار میگیرد.

اگر به کدها دقت کنید متوجه روش انجام این تکنیک خواهید شد.

امیدوارم مورد استفاده دوستان قرار گرفته باشد.

در پناه حق...