بشكل عام، يكون أكثر ملاءمة لتوسيط DIV عموديًا وأفقيًا بارتفاع محدد، لكنه يكون أكثر إزعاجًا إذا لم يتم تحديد الارتفاع. لقد جربته وحققت توسيطًا مطلقًا من خلال اثنين من DIVs المساعدين، وهو متوافق مع المعيار المتصفحات مثل IE وFF.
كود CSS:
#wrapper{height:100%;width:100%;overflow:hidden;position:relative}
#المجمع[id]{display:table;}
#منتصف{الموضع: مطلق؛الأعلى:50%؛اليسار:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{position:relative;top:-50%;left:-50%;z-index:9999;width:300px}
#box[id]{left:0;margin:0 auto;}
div.boxstyle{border:2px Solid #000;text-align:center;padding:5px;}
كود XHTML:
<div id="wrapper">
<div معرف = "منتصف">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>مثال مركز DIV المطلق</p>
</div>
</div>
</div>
للتوضيح باختصار، الغلاف هو الطبقة الخارجية، والوسط هو الطبقة الوسطى، والمربع هو الطبقة المركزية تمامًا.
في المتصفحات القياسية مثل FF، يمكنك ضبط وضع العرض التقديمي لطبقة الغلاف على الجدول والطبقة الوسطى على وضع عرض خلية الجدول، بحيث يمكنك استخدام المحاذاة العمودية: الأوسط لتحقيق التوسيط الرأسي المطلق للطبقة الوسطى، بينما في IE يتم استخدام طريقة الأعلى: 50% والموضع النسبي لـ -50% الذي يحدده المربع اللاحق لتحقيق التمركز العمودي. تختلف طرق التوسيط الأفقي أيضًا، حيث يمكن لـ FF ببساطة تعيين الهامش لتحقيق ذلك، بينما يقوم IE أيضًا بتعيين اليسار لتعويض بعضهما البعض.
بالإضافة إلى ذلك، لا يتم التعرف على التعبيرات مثل #box[id] إلا من خلال المتصفحات القياسية مثل FF، لذا يمكنك تعيين الأنماط التي تنتمي إلى المتصفحات مثل FF هنا.
نظرًا لعدم تعيين ارتفاع الصندوق، فإن الارتفاع الافتراضي هو تلقائي مع ارتفاع متغير، وينطبق الشيء نفسه على العرض المتغير.