كيف اضع الصورة في المنتصف

لحل المشكلة تحتاج إلى تعديل الخصائص المعطاة للـ container ، لاحظ :

      .bg .container {
            /* قم بإضافة السطر التالي */
            transform: translateY(-50%);
            /* ********************* */
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
      }

الانحراف للأعلى الذي تعاني منه، بحدث لأن اعطيت الـ container الخاصية

top: 50%;

وبالتالي سيكون هنالك 50% من طول الشاشة في الأعلى ثم يأتي العنصر container وبالتالي يبدأ العنصر بعد نصف الشاشة.

والخاصية transform التي اعطيناها القيمة translateY(-50%) تقوم بإزاحة العنصر container بقيمة 50% من طوله باتجاه الأعلى بحيث يصبح في المنتصف تماماً.

فكان لدينا العنصر container يبدأ بعد 50% من طول الصفحة فقمنا بسحبه 50% من طوله نحو الأعلى كما في الصورة :