Center text in screen vertically

Question

I'm not sure how to center my text vertically. Basically, when I click a button the page will gray out with a loading text. I managed to center it horizontally but can't do it in vertical.

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>

Answer 1

You need to change your CSS a little bit to achieve that as:

.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

Just add these three lines to your css for .LockOn

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

Here's a working snippet. I changed your script a liitle bit to show it working.

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