How to position div in the middle of Electron/VUE application's screen?

I am struggling to center a container div on the screen. The technology stack I am using includes Electron, VUE, HTML, and CSS. Here is the code snippet I have attempted:

<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

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

Answer №2

The reason your div is not centering with margin:auto is because it has a default width of 100%. To solve this, you can add text-align:center to center the elements.

<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

Here is the solution you've been looking for. Have a great Fourth of July celebration!

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for changing styles in a Vue Vuetify app based on language selection

Currently, I am working on a Vue.js application using Vuetify and Vue-i18n for internationalization. I have a specific font-family that I want to only be applied when the language is set to Arabic. In order to achieve this, I will need to switch styles bas ...

Is there something I'm overlooking when it comes to vue router transitions?

I am attempting to implement a smooth transition between my Vue components with the following code: <template> <div id="app"> <router-link to="/">Go to home</router-link> <router-link to="Register">Go to register< ...

Transforming content dynamically

I am currently working on a single-page website that features a comprehensive product catalog. Here are the key elements I'm focusing on: A one-page website layout, complete with header, content, and footer (developed using HTML5/CSS3) Dynamic cont ...

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...

You are unable to select the element in IE if there is an image in the background

Apologies for coming back with the same question, as I realize now that I was not clear in my explanation yesterday. You can find the codepen here (please note that it may not open in IE8). My issue is with dragging the 'move-obj' element in IE b ...

Tips for showing an error notification if a field is left blank in a native script form

I'm struggling to implement an error message feature for when the user leaves the email and password fields empty. Despite trying to include if statements in the script file, I can't seem to get the error message to show up as intended. <temp ...

Unable to display a Google map within a webview when viewing a local HTML file

I am currently working with a local HTML file called basicmap.html that includes the following code: <!DOCTYPE html> <html> <head> </head> <body> <div id="map"></div> <script> ...

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

Data is nowhere to be found despite using the post method, but the URL still contains valuable information

Recently, I've delved into the world of PHP and have been experimenting with HTML forms. Initially, I used the method GET which worked perfectly fine. However, when I switched to using the method POST, I encountered an issue where I couldn't retr ...

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

Interactive email with a dynamic dropdown feature

I am currently working on creating an HTML email that can display data depending on the selection made from a dropdown menu within the email itself. Despite my research, I have not come across a suitable solution for this specific scenario. My current app ...

What could be causing my Angular.js application to malfunction on IE7?

I have developed an Angular.js application that is working well on most browsers, but I am now facing compatibility issues with IE 7 and above. I have tried different approaches such as adding id="ng-app", using xmlns:ng, manually bootstrapping angular wi ...

Our connection to [ws] was unexpectedly interrupted as the page was in the process of loading, all while utilizing Vue CLI within Firefox and a proxy

Here are the steps you should follow to reproduce the issue: To begin, make sure to install Vue CLI and create a new Vue CLI project by running vue create test-project. Be sure to use Vue 3 along with Yarn. You will need to update the vue.config.js file i ...

Updating the video tag's source attribute using JSON information

I am in the process of creating a unique video player using HTML and Javascript that will sequentially play a set of videos until all 6 have been displayed. The URLs for these videos are stored within an array that is mapped in a .json file named clips.jso ...

Ways to access large h5p files

My understanding is that h5p files cannot be accessed on a local device in offline mode (although there is an option like h5p-standalone, it requires setting up a local webserver). To view h5p content, a webserver that supports h5p is necessary, such as th ...

Learn the method to display a particular post using its unique post ID

I need some help displaying two specific posts by utilizing their post IDs. I'm struggling with the code to retrieve and call these post IDs. Can someone assist me? /////////////////////////////// ////////////////////////////// <div class="foo ...

Is there a way to display multiple images in a JSON message object?

If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

My web app features a vertical CSS menu that is working correctly except for one minor issue. When I mouse out on all elements with the class a.menutoggle, the last dropdown menu remains open. I am struggling to find a solution to hide it. Can someone plea ...

"Want to extend the current date (Y-m-d) by a few days? Here

On my form, there is a date input that I want to automatically set to the date that is 14 days from today. I know how to set the value to today's date, but how can I add 14 days to it? <p>Term:<br> <input type="date" name="term" i ...

Is there a way for me to retrieve the data inputted into this form using JavaScript?

Having some trouble with this code. Can someone help me figure out what's going wrong? function displayData() { var userInput; userInput = document.getElementById(userInputs.firstInput); alert ("You entered: " + userInput); } <form ...