[Vuejs]-Move div to center of screen of Electron/VUE application

by

4👍

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

1👍

Your div that you are trying to center has a default width of 100% that’s why the margin:auto isn’t working. If you add text-align:center, the elements will 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>
👤DCR

0👍

Hope this is the answer you need. Cheers and Happy early 4th of July.

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

Leave a comment