وسط چین کردن یک div

وسط چینی افقی با CSS

برای این کار باید مقدار خاصیت Margin را در استایل خود برابر Auto 0 قرار بدید. در این صورت المان HTML در وسط والد خود قرار میگیرد. در صورتی که آن در لایه های داخلی ستونی غیر وسط نباشد در وسط صفحه قرار میگیرد. همینطور اگر آن تگ زیرمجموعه تگ body باشد در وسط صفحه جای خواهد گرفت.

برای مثال جعبه DIV زیر از سمت راست و چپ همیشه در وسط والد خود قرار میگیرد:

1 2 3

<div style="margin: 0px auto; width: 200px; background-color: #DDD">     <a href="http://askweb.ir">Simple Text</a> </div>

همینطور در صورتی که بخواهید متنی را در وسط قرار دهید کافیست خاصیت text-align آن را برابر center قرار دهید.

وسط چینی عمودی با CSS

برای وسط چین عمودی باید خاصیت position را برابر absolute و خاصیت top تگ را برابر 50% قرار دهید.

1 2 3

<div style="position: absolute; top: 50%; width: 200px; background-color: #DDD">     <a href="http://askweb.ir">Simple Text</a> </div>

کد بالا تگ شما را از بالا و پایین در وسط صفحه قرار میدهد.

نکته: در صورتی که میخواهید تگ شما هم از نظر افقی و هم عمودی در وسط صفحه قرار بگیرد کافیست المانی که از نظر افقی وسط چین شده را در درون المانی که از نظر عمودی وسط چین شده قرار دهید.