مع الاتجاه الافتراضي flex-direction: row، نستخدم justify-content: center لتوسيط العناصر أفقيًا:

.container {
  display: flex;
  justify-content: center;
}

القاعدة

• justify-content: على المحور الرئيسي (أفقي مع row).
• align-items: على المحور المعاكس (عمودي مع row).

توسيط كامل في الوسط

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

لا توجد قيمة اسمها middle في Flexbox. ومع flex-direction: column ينعكس الدوران: justify-content يصبح عموديًا.