i'm studying alignments in css and html and have a doubt.

我正在研究css和html中的对齐，有一个疑问。

how can i put each element of this 'login form' in different lines while keeping then centered horizontaly and verticaly?

我怎样才能把这个‘登录表单’的每个元素放在不同的行中，同时保持水平和垂直居中呢？

<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

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;
}

Is this the effect you want?

这是你想要的效果吗？

body {
  min-height: 100vh;
  margin: 0;
}
.container {
  width: 100%;
  min-height: inherit;
  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;
  text-align: center;
}

input {
  text-align: inherit;
}

<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>