javascript - 在屏幕中垂直居中文本

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>

Answer 1

你需要稍微改变你的 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;
}