html - 将div移至Electron/VUE应用程序的屏幕中心

我正在尝试将容器div移动到屏幕中央。我的应用程序使用Electron，VUE，html，css。我尝试了以下代码

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

最佳答案

#div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}