How To Vertically Center Text Over Responsive Video
Question
For some reason this is giving me heck and can't find a solid answer.
I have a video playing in the background that goes to full-width and is responsive to the screen size. I have a title/text over the video. But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! Thanks for any help!
Codepen:
http://codepen.io/149203/pen/VagPxe
html:
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div> <!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div> <!-- header-container -->
</body>
css:
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
text-align: center;
color: white;
}
pulling in this css:
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css
3 answers
solution1
3 2016-05-07 22:34:13
Display wrapper to display: table , change child element to display: table-cell , vertiacl-align: middle. http://codepen.io/anon/pen/ZWwLPP
solution2
2 ACCPTED 2016-05-14 02:50:22
I found and forked this CodePen. This is the best solution I found. (Uses Bootstrap.)
http://codepen.io/149203/pen/JXxbEL
HTML
<div class="row">
<div class="col-xs-12 vert-center-container">
<video autoplay loop style="width:100%" class="img-responsive">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
</video>
<div class="vert-center-text">
<h1>Caption Text</h1>
</div>
</div>
</div>
CSS
.vert-center-text {
position: absolute;
top: 40%;
left: 0;
text-align: center;
width: 100%;
}
.vert-center-text h1 {
color: white;
}
.vert-center-container {
position:relative;
}
solution3
0 2016-05-07 22:39:22
simulate the the header container as table and h3,h6 as table-cell with vertical-align:middle
.header-container { width: 100%; height: 100vh; position: relative; padding: 1px; display:table; } .video-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } video { position: absolute; z-index: -100; width: 100%; } h3, h6 { display:table-cell; vertical-align:middle; text-align: center; color: white; }
<body> <div class="header-container"> <div class="video-container"> <video preload="true" autoplay="autoplay" loop="loop" volume="0"> <source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4"> </video> </div> <!-- video-container --> <h3>Centered Title</h3> <h6>This should be vertically and horizontally centered</h6> </div> <!-- header-container --> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.