Position h1 with border in center of picture - html

Question

I am making a banner with Bootstrap 3, and the end result should look like this, and have a height off 350px;
A demoversion off the code I have until now can be seen here.
I am not sure how I can make the h1 and p tag align in the middle? At the moment they are at the top, and I cannot figure out how to position them.
When I look on < 768px the picture is way to big. Is that because of the cover in the header tag? How can I make that picture get smaller on < 768px?
header {
height:100vh;
background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
#media (max-width:767px) {
header {
/*height:100%;*/
background-attachment:inherit;
height:100vh;
}
}
header h1 {
/*background-color:rgba(255,255,255,0.36);*/
padding:10px;
text-align:center;
border:5px solid rgba(108,111,119,0.19);
/*box-shadow:0px 0px 1px #333;*/
}
header h1 {
font-family:'Aladin';
font-size:71px;
color:#fff;
text-shadow:1px 1px 1px #333;
}
#media (max-width:767px) {
header h1 {
font-size:41px;
}
}
header p {
text-align:center;
padding-top:20px;
font-size:26px;
font-weight:600;
font-family:'Source Sans Pro';
/*letter-spacing:2px;*/
color:#f5f5f5;
text-shadow:1px 1px 1px #111;
padding-bottom:20px;
}
#media (max-width:767px) {
header p {
font-size:17px;
}
}
header .row.no-space p {
text-align:right;
}
/* Social Media Position */
header .row.no-space {
margin-top:initial;
bottom:0px;
position:fixed;
right:20px;
}
header .fa {
color:#fff;
text-shadow:1px 1px 1px #333;
padding:7px;
}
<header>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 text-bg">
<h1>Welcome on free feelings</h1></div>
<div class="col-md-12">
<p>Animated header with scroll engine </p>
</div>
</div>
<div class="row hidden-xs no-space">
<div class="col-md-12">
<p>
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-pinterest-square"></i>
</p>
</div>
</div>
</div>
</header>

Answer 1

To vertically center the content on the page, I would use CSS flexbox on your <header> element like this:
header {
display: flex;
align-items: center;
}
Regarding the size of the image, would it be acceptable to align the text to the top of the page on mobile?
If so, then I would suggest removing the height: 100vh and flexbox from the header on mobile. Instead you need a responsive image in relation to the screen width but since you are using a background image you can do this:
header {
background-image: url(...);
background-size: cover;
height: 0; /* Use padding-bottom to define height */
padding-bottom: 62%; /*Aspect ratio of image (h/w*100)*/
}

Answer 2

Add this at the bottom of your CSS:
body {
margin: 0
}
h1 {
position: absolute;
}
.text-bg {
display: flex;
justify-content: center;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

Answer 3

Doing this old school you can use the display: table approach (which is not what is recomended these days):
header {
height:100vh;
background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
background-size:cover;
background-position:center center;
background-attachment:fixed;
display: table;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
The current recommended way usually is with Flex which is cleaner and nicer. If you want to keep all as is then you just change your header CSS to:
header {
height:100vh;
background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
background-size:cover;
background-position:center center;
background-attachment:fixed;
display: flex;
align-items: center;
}