center text in screen when resize browser - html

Question

I have two div the container to create an overlay 100% in the screen and the second one in the center of the screen whit some text.
I want that when the page is resized the text stay in the center of the screen. I showing and hiding the container on some event.
#container
{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100%;
width: 100%;
z-index: 999;
position: absolute;
}
#text
{
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
}
<div id="container">
<div id="text">some text here</div>
</div>

Answer 1

If you are looking for vertical align purpose. Go for display: table property
#container {
background-color: rgba(0, 0, 0, 1);
display: table;
height: 100%;
width: 100%;
position: absolute;
}
#text {
text-align: center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
}
<div id="container">
<div id="text">some text here</div>
</div>

Answer 2

Here your code..
HTML:
<div id="container">
<div id="text">some text here</div>
</div>
CSS
#container
{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100vh;
width: 100vw;
z-index: 999;
position: absolute;
}
#text
{
font:10px;
color:white;
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
}
Jquery:
$("body").click(function(){
$("#container").css("display","block");
});

Answer 3

#text {
position: absolute;
display: inline;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
<div id="container">
<div id="text">some text here</div>
</div>
set position to 'absolute' and then left and top to 50% to locate div center of screen.
(if you don't want to locate div center of screen vertically then remove top: 50%).
then your div's left top corner will be center of browser.
To locate center of screen exactly move the div left the amount of half of its size and move to top half of its height.

Answer 4

Use display flex property.
#container{
display:flex;
align-items: center;
height:100%;
}
#text{
width:100%;
text-align:center;
}
Hope it'll help you out.

Answer 5

Hope this helps you.
jQuery(document).ready(function($) {
$("button").click(function(event) {
$("#container").show();
});
});
#container{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100%;
width: 100%;
z-index: 999;
position: absolute;
}
#text{
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="container">
<div id="text">some text here</div>
</div>
<button>Show popup</button>