Align text to the center vertically on the screen

I am struggling to vertically center my text on a page. Whenever I click a button, the page becomes gray with a loading message. Although I've managed to horizontally center it, vertical alignment is posing a challenge.

CSS

.LockOff {
    display: none;
    visibility: hidden;
}

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    bottom: 0px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    text-align: center;
    padding-top: 20%;
    filter: alpha(opacity=75);
    opacity: 0.75;
}
.lockMsg {
    color:black;
    font-weight: bold;
}

HTML

<script type="text/javascript">
    function lockScreen() {
        var lock = document.getElementById('divLock');

        if (lock)
            lock.className = 'LockOn';

        lock.innerHTML = "<h1 class=\"lockMsg\">YOUR REQUEST IS BEING PROCESSED. PLEASE WAIT.</h1>";
    }
</script>

<div id="divLock" class="LockOff"></div>
javascripthtmlcss

Answer №1

To achieve the desired effect, make some adjustments to your CSS code:

.LockOn {
    display: block;
    visibility: visible;
   position: absolute; 
    z-index: 999; 
    bottom: 0px; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    background-color: #ccc; 
    text-align: center; 
    padding: 0; 
    filter: alpha(opacity=75); 
    opacity: 0.75;
}
.lockMsg { 
    color: black; 
    font-weight: bold; 
    position: absolute; 
    left: 0; 
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); 
    text-align: center;
}

Answer №2

To achieve the desired result, simply include these three lines of code in your CSS file under the class .LockOn

.LockOn{
   display:flex;
   align-items:center;
   justify-content:center;
}

Below is a functioning example. I made some adjustments to your script for demonstration purposes.

(function lockScreen() {
        var lock = document.getElementById('divLock');

        if (lock){
            lock.className = 'LockOn';
          }

        lock.innerHTML = "<h1 class='lockMsg'>YOUR REQUEST IS BEING PROCESSED. PLEASE WAIT.</h1>";
})();

.LockOff {
    display: none;
    visibility: hidden;
}

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    bottom: 0px;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    text-align: center;
    filter: alpha(opacity=75);
    opacity: 0.75;
    display:flex;
    align-items:center;
    justify-content:center;
}
.lockMsg {
    color:black;
    font-weight: bold;
}
<div id="divLock" class="LockOff"></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

My ReactNative Android application is experiencing significant lag, is there anyone who can assist me in resolving this issue?

Currently, I'm tackling a reactnative android app project and have noticed a significant drop in performance. Unfortunately, I am clueless about the root cause of this issue. Could it be related to the navigator or are there other underlying factors a ...

javascriptreactjsreact-native

What is the best way to add a vanilla JavaScript keyup event listener to an Angular md-autocomplete input by utilizing the DOM id?

I am working with an angular md-autocomplete setup that looks like this: <md-autocomplete md-input-id="myid" ...> </md-autocomplete> My goal is to add an event listener like this: document.getElementById("myid") .addEventListener ...

javascriptangularjsinitkeyupmd-autocomplete

Once the PostgreSQL container is stopped with docker-compose down, the previously used port becomes unavailable for use again

Currently, I am involved in a project which utilizes express as the server and postgres as the database to delve into dockerization. The server relies on the database being operational. Initially, when running docker-compose up everything functions correct ...

javascriptpostgresqlexpressdockerdocker-compose

Exploring how to use $lt and $gt in JavaScript with dates

I am attempting to retrieve data from a MongoDB collection. Below is an example of the data: { "entryDate" : "2012-10-14T00:00:00.000Z", "amount" : 1, "cardId" : "50786621e3b983f1078d0bc9", "_id" : ObjectId("507a17354c6cbd6a4b000001"), "addedDate" : "Sat ...

javascriptnode.jsmongodb

How can multiple instances of a JavaScript function be executed with varying arguments?

Currently, I am using the ExtJS framework and running one method multiple times with different parameters. I am seeking a more consistent, easy, and maintainable approach to handle this. Would vanilla Javascript solutions be the way to go? I attempted to ...

javascriptfunctionextjsargumentsfactory-pattern

What is the best way to ensure a div container fills the entire height of the screen?

I am currently working on developing my very first iOS HTML5 app, which is a simple quote application. One challenge I am facing is how to set the height of my container div to match that of an iPhone screen. You can view the design I have so far on this j ...

htmlcss

Trail of crumbs leading to pages displayed in a div container

My website is designed with only one page where all other pages are loaded within a div. I am looking to implement breadcrumbs to keep track of the pages loaded inside the div. However, the solutions I have found online only work for pages loaded in the en ...

phpjavascriptjqueryajaxbreadcrumbs

Tips for resolving issues with dropdown menu placement

Here is the current state of my HTML and CSS code: <div class="header"> <div class="container-fluid"> <div class="row"> <div class="col-1"></div> <div class="col-10"></div> <div class="col-1 dropd ...

htmlcssbootstrap-4dropdown

Consistentize Column Titles in Uploaded Excel Spreadsheet

I have a friend who takes customer orders, and these customers are required to submit an excel sheet with specific fields such as item, description, brand, quantity, etc. However, the challenge arises when these sheets do not consistently use the same colu ...

javascriptexcelangulartypescript

Adjusting the transparency of a div's background using RGBa

I am currently working on adjusting the background opacity of a div using a jquery ui slider. Allowing users to modify the background color of the div, I am seeking guidance on how to adjust only the alpha parameter of the background while keeping the col ...

jquerycss

How can I manage the pageWidth property in the layout of my xPage Bootstrap app?

Check out these two examples - one with app layout and the other with just a navbar, both with fixed pageWidth settings. <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"> <xe:applicationLayout id="a ...

csstwitter-bootstrapxpageslotus-notes

Why do we need to use [`expression`] notation?

I've recently started exploring reactjs and I came across this code snippet: handleChange = event => { const { name, value } = event.target this.setState({ [name]: value, }) } I'm a bit puzzled about the notation used here: [name ...

javascriptreactjs

What is the best way to format a condensed script into a single line?

There are times when the script in the web browser is packed into one line like function a(b){if(c==1){}else{}}. I have attempted to locate something that would display it in a more normal format. function a(b) { if(c==1) { } else { } } Howev ...

javascripthtmlbrowser

Discovering the screen width and increasing its value using CSS

Is there a way to determine the screen size and then add 253px to it? For example, in CSS: .element { width: calc(100% + 253px); } What would be the best approach to achieve this? ...

htmlcss

I keep encountering an issue with Nodemailer where it keeps throwing the error message "TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument needs to be a string or.."

The error message is incredibly long, but here is a brief excerpt: TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of Object at PassThrough.Writable.write ( ...

javascriptnode.jsexpressnodemailer

Having trouble displaying real-time camera RTSP streaming using Angular

I am currently in the process of developing a web application using Angular and I need to incorporate a window that displays live RTSP streaming. Upon conducting research, I discovered that this can be achieved by utilizing the JSMpeg JavaScript library. ...

javascriptangulartypescriptlive-streaming

jQuery append allows for the addition of multiple items simultaneously

I need assistance with automatically creating a div when clicking on a button. I'm encountering an issue where each click increments the display of the div. Can you provide some guidance on how to resolve this problem? ...

javascriptjqueryhtml

Is it possible to execute a JavaScript command before the function finishes its execution?

Is there a way to hide a button when a function starts, display some text, and then hide the text and show the button again when the function finishes? I'm struggling with this task because JavaScript doesn't output anything to the screen until ...

javascript

What is the best way to mix up the images in my memory game?

My JavaScript memory game is functioning properly, but I would like the images to load in a random order. Unfortunately, I'm not sure how to accomplish this. Here is the current setup: var easyImages = ["img/bat.jpg", "img/bug.jpg", "img/cat.jpg", " ...

javascriptimagememoryrandomshuffle

Utilize the request object from Express within a Mongoose Plugin

I have incorporated an API in ExpressJS along with a middleware that runs before each endpoint controller: app.use(segregationMiddleware); app.get('/some-endpoint', controller1); app.get('/some-endpoint-2', controller2); The segregat ...

javascriptnode.jsexpressmongoose