توسيط النص باستخدام flex

يمكنك ذلك باستخدام الخاصيتان التاليتان:
align-items: تقوم بتوسيط العناصر بشكل طولي ولها أكثر من قيمة من ضمنها center
justify-content:  تقوم بتوسيط العناصر بشكل أفقي ولها أكثر من قيمة من ضمنها center التي تقوم بتوسيط العنصر
لاحظ كود html

    <div class="">
        2
    </div>

لاحظ كود css

        div{
            background-color: #333;
            color: #fff;
            width: 200px;
            height: 300px;
            display: flex;
          
            align-items: center;
            ^^^^^^^^^^^^^^^^^^^^
          
            justify-content: center;
            ^^^^^^^^^^^^^^^^^^^^^^^^^
        }

سوف تكون النتيجة كالتالي

بتاريخ 41 دقائق مضت قال محمد أبو عواد:

يمكنك ذلك باستخدام الخاصيتان التاليتان:
align-items: تقوم بتوسيط العناصر بشكل طولي ولها أكثر من قيمة من ضمنها center
justify-content:  تقوم بتوسيط العناصر بشكل أفقي ولها أكثر من قيمة من ضمنها center التي تقوم بتوسيط العنصر
لاحظ كود html

    <div class="">
        2
    </div>

لاحظ كود css

        div{
            background-color: #333;
            color: #fff;
            width: 200px;
            height: 300px;
            display: flex;
          
            align-items: center;
            ^^^^^^^^^^^^^^^^^^^^
          
            justify-content: center;
            ^^^^^^^^^^^^^^^^^^^^^^^^^
        }

سوف تكون النتيجة كالتالي

شكككككككراً

ممكن تشوف الكود