如何让登录表单元素各占一行且保持水平垂直居中？

我正在学习CSS和HTML中的对齐知识，有一个疑问：如何让以下登录表单中的每个元素分别显示在不同的行上，同时保持它们水平和垂直居中？

原HTML代码 #

<div class="container">
  <div class="tr">
    <div class="form">
      <div class="fields">
        <img src="https://www.kasandbox.org/programming-images/avatars/leaf-blue.png">
        <input type="text" placeholder="usuario">
        <input type="password" placeholder="senha">
        <button class="btn-log">some action</button>
        <a>some text</a>      
      </div>
    </div>
  </div>
</div>

原CSS代码 #

.container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

img{
  width: 30%;
}

.tr{
  width: 50%;
  height: 50%;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form{
  width: 80%;
  height: 80%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

要实现每个元素分行且整体水平垂直居中，只需对核心容器做针对性修改，同时补全全屏居中的基础设置：

修改后的CSS代码 #

/* 补全屏基础设置，避免高度塌陷 */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

img{
  width: 30%;
}

.tr{
  width: 50%;
  height: 50%;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form{
  width: 80%;
  height: 80%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 核心修改：让表单元素垂直排列并居中 */
.fields {
  display: flex;
  flex-direction: column; /* 强制元素垂直排列，自动换行 */
  align-items: center; /* 内部元素水平居中 */
  gap: 12px; /* 可选：给元素间添加间距，优化视觉 */
  width: 100%; /* 确保容器宽度足够，让居中生效 */
}

/* 可选：统一表单控件宽度，让布局更规整 */
.fields input, .fields button {
  width: 70%;
  padding: 8px;
  box-sizing: border-box;
}

关键修改说明 #

• 给html和body设置全屏宽高并清除默认边距，确保最外层容器能真正占满屏幕。
• 对.fields容器添加flex-direction: column，让内部元素自动垂直分行。
• 通过align-items: center让所有表单元素在水平方向上居中。
• 可选的gap和控件宽度设置，能让表单的视觉效果更协调。

内容的提问来源于stack exchange，提问作者Percy22