مقدمة

هناك عدة طرق لوضع عنصر div في المركز باستخدام CSS. فيما يلي بعض الطرق الشائعة:

1. استخدام Flexbox

يعد Flexbox أحد أكثر الطرق شيوعًا لتوسيط العناصر أفقيًا وعموديًا.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`

    
Isi di sini
`}

2. استخدام تخطيط الشبكة

توفر شبكة CSS أيضًا طريقة سهلة لتوسيط العناصر.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`

    
Isi di sini
`}

3. استخدام الموضع المطلق والتحويل

تستخدم هذه الطريقة الموضع: المطلق والتحويل لوضع العنصر في المركز.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`

    
Isi di sini
`}

4. استخدام الهامش التلقائي

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

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`
Isi di sini
`}

5. استخدام محاذاة النص وارتفاع الخط (التوسيط الأفقي فقط)

يعمل هذا بشكل جيد مع النص أو عناصر الكتلة المضمنة.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`

    
Isi di sini
`}

6. استخدام عرض الجدول

هذه تقنية قديمة ولكنها لا تزال تعمل.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`

    
Isi di sini
`}

خاتمة

بالنسبة لتوسيط العناصر في منتصف الصفحة أفقيًا وعموديًا، تعد أساليب Flexbox وGrid هي الأسهل والأكثر حداثة. ومع ذلك، قد تظل الطرق الأخرى مفيدة اعتمادًا على احتياجات المشروع. شكرا لقرائتكم هذا المقال حتى النهاية