مشكلة في تنسيق login form

المشكلة الرئيسية في الكود الخاص بك تكمن في طريقة توسيط ال form فأنت تستخدم:

form {
    width: 300px;
    height: 300px;
    align-content: center;
    align-items: center; 
    justify-content: center; 
    margin: auto;
    background-color: azure;
}

واستخدمت كلا من align-content, align-items, و justify-content بدون تحديد display: flex للعنصر الأب مع أن margin: auto يمكن أن يساعد في التوسيط الأفقي، لكنه لا يكفي للتوسيط الرأسي ولحل المشكلة، يمكنك استخدام flexbox في الـ body كالآتي:

body {
    background: linear-gradient(90deg, rgba(0,24,36,1) 0%, rgba(41,154,153,1) 0%, rgba(74,82,84,1) 100%);
    width: 100%;
    height: 100vh;
    display: flex;          
    align-items: center;     
    justify-content: center; 
}

form {
    width: 300px;
    height: 300px;
    background-color: azure;
}

حددت margin: auto لعنصر form وسيتم توسيطه بذلك أفقيًا، أما رأسيًا، فستحتاج إلى استخدام flex وتحديد طول للعنصر الأب وهو section كالتالي:

section {
    display: flex;
    height: 100%;
}

أيضًا نسيت تحديد خاصية display: flex لعنصر form:

form {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background-color: azure;
}