Electron/VUEアプリケーションのdivを画面中央に移動

Question

コンテナdivを画面の中央に移動しようとしています。私のアプリケーションはElectron、VUE、html、cssを使用しています。オート機能していない：私はあなたがセンターにしようとしているあなたのdivは余裕が理由です、100％のデフォルトの幅を持って、次のコードに

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

Answer 1

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

Answer 2

を試してみました。あなたはテキスト整列追加する場合：中央を、要素が

<div class="container col-lg-2 col-md-3 col-sm-4 col-xs-6 " style="text-align:center" > 
 

 
    <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;" > 
 
    <label for="inputPassword" class="sr-only">Password</label> 
 
    <input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required> 
 
    <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;}" type="submit">Log in</button> 
 

 
</div>

Answer 3

を中心に説明する、これはあなたが必要な答えであると思います。乾杯と7月4日の幸せ早い。

#innerLogo { 
 
    display: table-cell; 
 
    margin: 0 auto; 
 
    border: 1px dashed blue; 
 
    vertical-align: middle; 
 
} 
 

 
#outerLogo { 
 
    display: table; 
 
    width: 100%; 
 
    text-align: center; 
 
    
 
    height: 400px; 
 
    border: 1px dashed red; 
 
}

<div class="row"> 
 
    <div class="container"> 
 
     <div id="outerLogo">   
 
      <div id="innerLogo"> 
 
       <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;" > 
 
<label for="inputPassword" class="sr-only">Password</label> 
 
<input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required> 
 
<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;}" type="submit">Log in</button> 
 
      </div>   
 
     </div> 
 
    </div> 
 
</div>