I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would prefer any suggested method to utilize a flex-box.
hmtl,
body {
height: 100%;
width: 100%;
background-color: wheat;
overflow: hidden;
margin: 0%;
}
.container {
display: flex;
gap: 200px;
align-items: center;
height: 100%;
width: 100%;
}
.form-container {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
}
.main-image {
height: 1200px;
width: 900px;
}
#main-Form {
margin: auto;
}<div class="container">
<div class="image-container">
<img class="main-image" src="./static/images/30daysreplay-social-media-marketing-3_a7s0MAXhc-unsplash (1).jpg" alt="">
</div>
<div class="form-container">
<form id="main-Form">
<input type="email" name="email-input" id="">
<input type="username" name="username" id="">
</form>
</div>
</div>