画面の中央にテキストが表示されます

Question

テキストを縦に並べる方法がわかりません。基本的には、ボタンをクリックするとページが読み込みテキストでグレー表示されます。私はそれを水平に集中させることができましたが、垂直にはできません。

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> 

あなたが達成するために、あなたのCSSを少し変更する必要が

Answer 1

と：

.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

ジャスト広告D .LockOn

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

のためのあなたのCSSにこれらの3行は、ここでの作業スニペットです。私はあなたのスクリプトをリリトルビットに変更して動作させるようにしました。

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