Issue
I have checked out various resources, like this one and this one, but I am still struggling to center my form elements both vertically and horizontally on the screen. I have tried using flex, padding, and stretching but nothing seems to work. Even after wrapping my form elements in a div, I am unable to achieve the desired centering effect.
If anyone could provide me with guidance on how to accomplish this task, I would greatly appreciate it!
https://i.sstatic.net/u6hag.png I want the fields to be stacked on top of each other, with both fields being vertically and horizontally centered on the screen.
Code
body {
background: #3472FF;
color: white;
}
.closeBtn {
position: absolute;
top: 20px;
right: 20px;
font-size: 2em;
color: white;
}
.login {
display: flex;
justify-content: center;
align-items: center;
}
.field {
display: block;
} <button class="closeBtn"><span class="icon-x"></span></button>
<form action="form.php" method="post">
<div class="login">
<div class="field">
<input type="text" name="username" placeholder="Username"> </div>
<div class="field">
<input type="text" name="password" placeholder="Password"> </div>
</div>
</form>