I'm attempting to center the content of a form.
<div class="login-container">
<div class="center-block">
<form action="/joinChart" method="get">
<input name="username" id="username" type="text"><br><br>
<input type="submit" value="enter your name">
</form>
</div>
</div>
In my style.css file (for center-block)
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.element {
. center-block();
}
and for login-container:
.login-container {
position: absolute;
width: calc(100% - 20px);
max-width: 800px;
height: 500px;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
}
Unfortunately, I am having trouble achieving this.