Controlling position of text when positioned - html

Question

I am trying to full width video the following code is a example. I don't want to restrict video by giving it a height as it is responsive, but the content or above positioned over it is pushing down when i view it on small screen e.g. Mobile
How can i make sure the text over the video shows at the same position even when screen is small and the text or panel below it also hide behind or hide/overlap the video.
I want to make the text on video and below be decent and not jumping or hiding. Am i using positions wrong?
.centered{
position: relative;
top:50%;
z-index: 1;
color:#fff;
text-shadow:1px 1px 10px #000;
}
video{
background-size:cover;
width: 100%;
position: absolute;
top:0;
}

Answer 1

Make sure the parent element has position: relative; and contains the video, and the parent adjusts responsively with the video. I do this by getting the aspect ratio of the video and creating padding (56.2%) that creates space for the video's aspect ratio (using the technique from the iframe section here), then put the text in that parent element and use a combination of position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); to center the text over the video.
* {margin:0;padding:0;}
#video {
height: 0;
padding-top: 56.2%;
position: relative;
overflow: hidden;
}
#video video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#video h1 {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
color: #fff;
text-shadow: 1px 1px 10px #000;
font-size: 36px;
font-family: sans-serif;
text-align: center;
}
<div id="video">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<h1>We Evolve with our students
</div>

Answer 2

I think this link will help you about centring anything ;)
About positioning text, you can use vh value. Ie.
.text {
position: absolute;
top: 30vh
}
Also, this guy from the top have a good example about absolute positioning ;)
Link about vh

Answer 3

Here is the css for the div with centerred class. Hope this will help you.
change the position to absolute and use the calc function to position the text to center from top
.centered
{
position: absolute;
top: calc(100% - 50%);
text-align : center;
left : 0;
right : 0;
z-index: 1;
color:#fff;
text-shadow:1px 1px 10px #000;
}