將div移動到Electron/VUE應用程序的屏幕中心

我想將容器div移動到屏幕的中心。我的應用程序使用Electron，VUE，html，css。我嘗試下面的代碼將div移動到Electron/VUE應用程序的屏幕中心

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

來源

2017-06-30 randyMoss1994

您可以在屏幕上一對夫婦的方式https://www.w3.org/Style/Examples/007/center.en.html中間居中東西 –

你應該除了div格式中的「margin：auto」外，還會刪除所有內容，所以它會顯示「style = margin：auto」。在這裏尋找關於如何用CSS中心元素的指南：https：//css-tricks.com/centering-css-complete-guide/。 – hRdCoder

刪除一切，除了「保證金：汽車沒有工作對我來說 – randyMoss1994

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

來源

2017-06-30 19:59:58

，沒有工作不幸工作 – randyMoss1994

你的div你想中心擁有的100％，這就是爲什麼保證金默認的寬度：汽車不能正常工作。如果您添加文本對齊：中心，元素將圍繞

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

來源

2017-06-30 20:07:59 DCR

沒有工作對我來說 – randyMoss1994

你運行的代碼段嗎？適用於我 – DCR

我明白，但在我的項目，它不工作 – randyMoss1994

希望這是你所需要的答案。 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>

來源

2017-06-30 20:10:59 Moojjoo

將div移動到Electron/VUE應用程序的屏幕中心

回答

相關問題