将 div 移动到 Electron/VUE 应用程序的屏幕中心答案

【问题标题】：Move div to center of screen of Electron/VUE application将 div 移动到 Electron/VUE 应用程序的屏幕中心
【发布时间】：2017-12-04 20:36:48
【问题描述】：

我正在尝试将容器 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>

【问题讨论】：

您可以通过几种方式将某些内容置于屏幕中间w3.org/Style/Examples/007/center.en.html
您还应该删除 div 样式中除“margin:auto”之外的所有内容，因此它显示为“style=margin:auto”。在此处查找有关如何使用 CSS 使元素居中的指南：css-tricks.com/centering-css-complete-guide。
删除除“margin:auto 对我不起作用”以外的所有内容

标签： html css webpack vue.js electron

【解决方案1】：

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

【讨论】：

【解决方案2】：

您尝试居中的 div 的默认宽度为 100%，这就是 margin:auto 不起作用的原因。如果添加 text-align:center，元素将居中

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

【讨论】：

我认为这与 VUE 或 Electron 有关
那么，它在代码 sn-p 中有效，但在您的项目中无效？

【解决方案3】：

希望这是您需要的答案。 7 月初，干杯和快乐。

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

【讨论】：