Struggling to center the login box on the page

Recently, I've been immersed in an HTML project and took on the task of creating a login page. When I delved into the stylesheet, I inputted the following code:

.login-box {
  width: 280px;
  position: absolute;
  top: 50%
  left: 50%;
  color: white;
  transform: translate(-50%,-50%);
}

Normally, this should center anything perfectly on the screen. However, it ended up placing the login box at the top left corner of the screen - slightly askew. If anyone is able to provide some guidance or advice on how to rectify this issue, I would greatly appreciate it. Thank you in advance!

htmlcss

Answer №1

To ensure the .login-box has a fixed height, simply assign it a specific value and remember to include a ; after setting the top: 50%.

I may not be fluent in English, but feel free to use my CSS code as a reference! 

.login-box {
    width: 280px;
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%, -50%);
}

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

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

javascriptphphtml

Guide on activating full screen mode in Firefox without user interaction

Is there a way to make a webpage automatically go into fullscreen mode upon loading? I attempted the following code: <html> <head> <script type="text/javascript> webkitEnterFullscreen(); </script> </head> <body onload="mo ...

javascripthtml

The difference between importing CSS in JavaScript and importing it directly in CSS lies in the way

Hello there, I am just starting out with web development and learning about Vue.js. In Vue 3, the recommended way to import CSS files from different packages is as follows: Method 1: Import directly in app.js //app.js import '../css/app.css'; i ...

javascripthtmlcssvue.js

Attempting to align two parent divs within a container div to appear side by side, while ensuring that one of the parent divs repeats multiple rows without impacting the second parent

I am in the process of building a custom WordPress theme from scratch, and I have created a template for the posts that will dynamically appear on the front page. To achieve the desired layout, I am utilizing Bootstrap 5. The structure includes a containe ...

htmlcsswordpress-themingbootstrap-5

Adjust for browser zoom within Three.js CSSRenderer

I'm currently developing a project in three.js using the CSSRenderer and the challenge I'm facing is ensuring that it displays correctly even when the browser zoom is not set at 100%. So far, it appears that: There isn't a way to forcibly ...

javascriptcss3dthree.js

When the text is lengthy, the button shifts its position

After creating two buttons, one with short text and the other with long text, I noticed that they are not aligned properly. Is there a way to align the second button even when the text is long? https://jsfiddle.net/ws2awc03/ var btn = document.createEl ...

javascriptcss

Sending Arguments to Shiny RMarkdown

After spending several days attempting to import data into a shiny rmarkdown file, I finally decided to seek help here. I am exploring different methods to achieve my goal, but it's crucial that the final product can be accessed through a website. Th ...

htmlrshinyr-markdownparameters

The checkbox is failing to display as checked even after its value has been dynamically set to true

Currently, I am immersed in a project within ASP.NET MVC that involves displaying data on a page where users can interact by selecting checkboxes to make changes. In cases where there are numerous checkboxes present, a "Select all Checkboxes" button become ...

javascriptjqueryhtmlasp.net-mvc

AJAX Post Request Function without Form That Does Not Reset

I am currently struggling with understanding the Ajax POST method. I am attempting to make an API request, and since the response has similar parameters, I decided to create a global function that can be used by other HTML/JS pages. However, I am aware tha ...

javascripthtmljqueryajax

Fixing display flex with columns of percent width and 1px gap: A step-by-step guide

When displaying flex columns with percent width on a specific width, make sure to leave a 1px gap between them. Check out the screenshot here html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } .wrapper { max-width: 1200px; p ...

htmlcssflexbox

Creating a grid with individual node delays in CSS animations using ReactJS

Struggling with a CSS animation issue in ReactJs. I suspect the problem, but unsure how to solve it. I'm rendering a 5x5 grid and displaying it using this function: DisplayNodes = () => { const {grid} = this.state; // get the node array fro ...

javascriptcssreactjs

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas

Arranging two columns side by side with Bootstrap

Is it possible to align two boxes next to each other, one on the left and the other on the right? Additionally, how can I make sure that the mytitle box expands to full width on mobile devices? If floats are necessary, how can they be added when a class h ...

htmlcsstwitter-bootstrap

Remove a table along with its contents from HTML code using PHP

I'm working with some HTML code that includes a table, and I need to completely remove the table and its contents using PHP. While I know how to strip the table tags using PHP's strip_tags function, I'm not sure how to delete the table conte ...

phphtml

Tips for utilizing the if statement within ng-repeat in Angular version 1.0.8

My version of angular is 1.0.8-stable My main goal is to arrange data in rows of 3. This is the desired structure for my HTML: <div class="table-row"> <div class="item">item1</div> <div class="item">item2</div> ...

javascripthtmlangularjsangularjs-directive

Attributes required are not functional on mobile devices

Good day! I have encountered an issue with the required attribute on a form on my website. It seems to be working perfectly on my browser, but not on mobile devices. Has anyone else experienced difficulties with jQuery, JavaScript, or Node packages? <f ...

javascriptjqueryhtmlformsjquery-mobile

Transform a list element into three separate rows using Bootstrap

I need assistance wrapping a list of elements into 3 columns using a single <ul> Here is a visual representation of what I am aiming for: https://i.sstatic.net/dptO2.png <ul class="list-group list-group-flush row-cols-3"> <li ...

htmlcssbootstrap-5

What is the best way to conceal all lists except for the one that has been chosen?

Looking to enhance my sortable list with jQuery UI - currently it's functional, but I'd like to incorporate a dropdown menu for each item to designate the active one when clicked. Is there a way to modify the code so that upon selection, only th ...

javascriptjqueryhtmlhtml-lists

Show MQTT web channel information on an HTML webpage

To showcase data from an MQTT channel on an HTML page, I wrote a Node.js script as shown below: var mqtt = require('mqtt'); client = mqtt.createClient(1883, 'mqtt.beebotte.com', //Authenticate with your channel token, {username: &apos ...

htmlangularjsnode.jsmqtt

Unable to extract property from object in context due to its undefined status

Having trouble with the useContext hook in my React app for managing the cart state. Keep getting an error stating that the function I'm trying to destructure is undefined. I'm new to using the context API and have tried various solutions like e ...

javascripthtmlreactjsreact-hooks