توسيط عنصر باستخدام CSS: تحديد الموضع المطلق مقابل تحديد الموضع النسبي

عند محاولة توسيط عنصر باستخدام CSS، قد تواجه مشكلة حيث يبدو الهامش الأيسر: تلقائي والهامش الأيمن: تلقائي غير فعال مع الموضع: مطلق. ومع ذلك، تعمل هذه الهوامش عند تطبيق الموضع: نسبي.

ينبع هذا الاختلاف من الطريقة التي يزيل بها الموضع: المطلق عنصرًا من تدفق المستند العادي ويضعه وفقًا للإحداثيات المتوفرة. في هذا السياق، ليس لضبط الهوامش على تلقائي أي تأثير لأنه لا يوجد عنصر "أصلي" لحساب الهوامش بالنسبة إليه.

من ناحية أخرى، الموضع: النسبي يحافظ على موضع العنصر ضمن التدفق الطبيعي للصفحة . لذلك، يمكن استخدام هامش-يسار: تلقائي وهامش-يمين: تلقائي لتوسيط العنصر بالنسبة إلى العنصر الذي يحتوي عليه.

لتوسيط عنصر أفقيًا باستخدام الموضع المطلق، يمكنك ضبط عرض العنصر، وتحديد موضعه. إلى الحواف اليسرى واليمنى للحاوية الأصلية باستخدام اليسار واليمين، واضبط الموضعين العلوي والسفلي لتوسيط العنصر عموديًا.