To achieve this layout, you can utilize Flexbox. By setting the flex-direction: column on the container element, you create two flex-items stacked on top of each other: the header and the content. Next, apply flex: 1 to the content so it fills the remaining height in the window after the header, resulting in a layout like this:
https://i.stack.imgur.com/1Esy9.png
For centering the content both vertically and horizontally within the content__1 element, you can use display: flex on content__1, along with adding align-items: center and justify-content: center. To maintain image responsiveness, consider using properties like width: 60% and height: auto, depending on the image size.
https://i.stack.imgur.com/nRDQI.png
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container-fluid.flex,
.content__1 {
display: flex;
flex-direction: column;
}
.container-fluid.flex {
height: 100vh;
}
.content__1 {
align-items: center;
justify-content: center;
flex: 1;
}
header {
background: black;
padding: 15px;
color: white;
z-index: 1;
}
img {
width: 60%;
max-height: 70%;
height: auto;
}
p {
margin: 0;
}
<section class="container-fluid flex">
<header>This is a header</header>
<div class="content__1">
<img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" />
<p>This is some awesome text</p>
</div>
</section>
You can also achieve a similar result using CSS Tables. Suppose the header has a height: 50px, then you can set the content element's height to be calc(100vh - 50px) with display: table. To center the content inside the table, wrap the content in another div with display: table-cell and vertical-align: middle:
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.container-fluid.flex {
height: 100vh;
}
header {
background: black;
height: 50px;
line-height: 50px;
color: white;
z-index: 1;
}
content__1 {
display: table;
height: calc(100vh - 50px);
text-align: center;
width: 80%;
margin: 0 auto;
}
inner {
display: table-cell;
vertical-align: middle;
}
img {
width: 60%;
max-height: 70%;
height: auto;
}
p {
margin: 0;
}
<section class="container-fluid flex">
<header>This is a header</header>
<div class="content__1">
<div class="inner">
<img class="img-responsive" src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" />
<p>This is some awesome text</p>
</div>
</div>
</section>