I'm having trouble vertically centering this form [duplicate] - css

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed last month.
I'm currently developing a web app using vue.js, and I'm having trouble vertically centering some elements.
This is what I currently have
I would like to have the div with the form(grey colored bit) to be vertically and horizontally centered.
This is the code for the form, the top navbar is a different component. Also, I'm using tailwindcss but am open to inline or internal styling options the same.
<template>
<div class="bg-gray-600">
<form action="">
<div>
<input type="email" name="email" id="email"/>
<label for="email">Email</label>
</div>
<div>
<input type="password" name="password" id="password"/>
<label for="password">Password</label>
</div>
</form>
</div>
</template>
The code below is in my base.css which was created when the vue project was created. I have no idea how much it affects the elements or what the former block of code(The one with *) does.
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
position: relative;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I've tried most solutions I could find but they made little to no changes. I would like to avoid setting a fixed px height if possible because I would like it to be centered across viewports.

Answer 1

Here are a few methods on how to center an HTML element:
The oldest trick in the book:
.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
This works by moving the form element 50% to the left and 50% to the top of the container and move's it back 50% of its width and height.
flex
.form-container {
display: flex;
align-items: center;
justify-content: center;
}
Set the container of the form to flex and align it to the center vertically and horizontally.
grid
.form-container {
display: grid;
place-items: center;
}
Same thing as flex, but both justify-content and align-items are merged into the same line.
You can give the same CSS to your form using tailwindcss:
1.
<form class="absolute top-1/2 left-1/2 translate-x-1/2 translate-y-1/2">
<div class="bg-gray-600 flex items-center justify-center">
<div class="bg-gray-600 grid place-items-center">
Hope this helps!

Answer 2

Apply this css on the parent of your form, in this case, probably the bg-gray-600
.bg-gray-600 {
display:flex;
justify-content:center; /*horizontal center*/
align-items:center; /*vertical center*/
}
You might need to define width or height of the parent in order this to work. Depends on your CSS.
The * that you said you dont understand is used to select every element within the whole page, so the bg-gray-600 as well. In this case, none of its values effect the centering of your form.