center text in zero width element - html

Question

Lets say i have a code:
#container {
position: fixed;
top: 50%;
left: 50%;
width: 0;
height: 0;
text-align: center;
font-size: 300px;
}
<div id = "container">
text
</div>
I need the text to be centered. I need the text to be centered, even if the text is bigger than the window. It is necessary, that the text is position fixed, because the whole text sometimes goes BELOW the screen. I don't want it generating any scrollbars. It is very necessary in my situation. I need the container to be as small as possible, because huge scrolling divs generating lag, and i am doing parallax, with about 40 of them.
How do you center that text?

Answer 1

You could try with flexbox (display: flex)
#container {
display: flex;
position: fixed;
font-size: 300px;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
<div id="container">
text
</div>

Answer 2

If you use position:fixed, it should not generate scrollbars on html. No need to set size to 0, but transform translate can help:
possible example (out of your context, may be weird if you use transform3D around your page)
#container {
position: fixed;
top: 50%;
left: 50%;
font-size: 600px;/* even bigger for demo purpose*/
transform: translate(-50%, -50%);
}
/* show center */
html {
min-height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
}
<div id="container">
text
</div>