屏幕中心垂直居中

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以实现：

String commandStr1 = "ffmpeg -y -i /sdcard/vids.mp4 -strict experimental -vf hue=s=0 -vcodec mpeg4 -b 2097152 -s 320x240 -r 30 /sdcard/vid_out.mp4";

String[] complexCommand3 = {"ffmpeg","-y", "-i", "/sdcard/videokit/out1.mp4",
    "-i", "/sdcard/videokit/out2.mp4", "-strict", "experimental",
    "-filter_complex",
    "[0:v]scale=640x480,setsar=1:1[v0];[1:v]scale=640x480,setsar=1:1[v1];[v0][0:a][v1][1:a] concat=n=2:v=1:a=1",
    "-ab", "48000", "-ac", "2", "-ar", "22050", "-s", "640x480", "-r", "30", "-vcodec", "mpeg4", "-b", "2097k", "/sdcard/videokit/out3.mp4"};

Answer 2

只需将这三行添加到.LockOn{ display:flex; align-items:center; justify-content:center; }

的css中即可

(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>";
})();

这是一个工作片段。我改变了你的脚本以显示它的工作原理。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

for eachItem in myJSON {
if let emailParsed = eachItem["email"] as? String {
    print(emailParsed)
    _email.text = emailParsed 
} 
}

＆＃13;

＆＃13;

＆＃13;