I'm having trouble vertically centering this form

Question

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:

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

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

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