Vertically center a text within the screen?

Hi,

I am trying to vertically center a text within the screen.
I have a message showing up when you try to right click anywhere on the screen.
It works well when you are at the top of the page, but when you scroll down and right click, this message will be too high, or you won’t see it at all…
I hope it makes sense…

shorturl.at/ovU13

HTML

<div class="resetlayout" id="copyrightmessage" style="display: none;"  onclick="myFunction()">
<div class="copyrightcontent">
<div class="copyrightcontainer">
<p>2020 © Tous droits réservés - www.christophehassel.com - Merci à vous !! :)</p>

CSS

.resetlayout {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:9999;
}
.copyrightcontent {
height: 100%;
width: 100vw;
background:rgba(0,0,0,.8);
}
.copyrightcontainer {
width: 100%;
position: absolute;
top: 50vh;
text-align: center;
}

JS

<script>
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
document.getElementById("copyrightmessage").style.display = "inline";
}, false);
function myFunction() {
document.getElementById("copyrightmessage").style.display = "none";  
};
</script>

<BODY onselectstart="return false;" ondragstart="return false;">

Here is the solution if anyone is interested.

https://codepen.io/chrishsl/pen/ExVwvYM

1 Like