I’m currently developing a web app using vue.js, and I’m having trouble vertically centering some elements.
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.
2
Answers
Apply this css on the parent of your form, in this case, probably the
bg-gray-600
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 thebg-gray-600
as well. In this case, none of its values effect the centering of your form.Here are a few methods on how to center an HTML element:
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.
Set the container of the form to flex and align it to the center vertically and horizontally.
Same thing as flex, but both
justify-content
andalign-items
are merged into the same line.You can give the same CSS to your form using tailwindcss:
1.
Hope this helps!