I am struggling to center a container div on the screen. The technology stack I am using includes Electron, VUE, HTML, and CSS. Here is the code snippet I have attempted:
<template >
<div class="login background" style="height:100%" >
<div>{{error}}</div>
<button v-on:click="signup">Signup</button>
<button v-on:click="calendar">Calendar</button>
<div class="container col-lg-2 col-md-3 col-sm-4 col-xs-6 " style="margin-top:300px" >
<h2 class="form-signin-heading">Welcome Back!</h2>
<label class="sr-only" for="inputUsername">Username</label>
<input v-model="username" type="text" id="inputUsername" name="username" class="form-control col-lg-1" placeholder="Username" required autofocus style="opacity:1;color:#76323F;font-weight:bold;margin-top:15px" >
<label for="inputPassword" class="sr-only">Password</label>
<input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required style="margin-top:15px;">
<button v-on:click="submit" class="btn btn-lg btn-primary btn-block" style=".btn-primary{color:#76323F;color:#76323F;background-color:#C09F80;border-color:#C09F80;margin-top:15px;opacity:.8;}" type="submit">Log in</button>
</div>
</div>
</template>