我不确定如何使文本垂直居中。基本上,当我单击一个按钮时,页面将变灰并显示加载文本。我设法将它水平居中,但不能垂直居中。
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 来实现:
.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;
}
关于javascript - 在屏幕中垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41627257/