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

لحل المشكلة تحتاج إلى تعديل الخصائص المعطاة للـ 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% من طوله نحو الأعلى كما في الصورة :

يمكنك ايضا استعمال خاصية align-items لتوسيط العنصر ضمن المحورين العمودي والافقي في حاوية مرنة.

قم باعطاء الحاوية ذات الصنف bg الخاصية display:flex وايضا الخاصية align-items مرفقة بالقيمة center

.bg {
   //
   display: flex;
   align-items: center;

تعرف على CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب

يمكن التغلب علي هذا الامر بكل بساطة من خلال خواص CSS وهما displayوالتي تعطي حرية العمل علي هذا العنصر و align-itemsوالتي تعمل علي توسيط عنصر ما بين حاوية معينة، بحيث يتم إسناد القيمة flex إلي الخاصية display وكذلك إسناد القيمة center إلي الخاصية align-items.

img{
display:flex;
align-items:center;
}