Vertically center content in a vh height div

Question

I have found some explanations, below some, but none has helped.

I have a website built on the skeleton framework. After some research for getting a fullscreen image for my homepage, I came up with the following code, and now need to center the content of that vh height dive horizontally and vertically. Can anybody help? Here is my screengrab: http://prntscr.com/g7bz5h

And the code:

.fullwidth-header {
  background-image: url(../images/Risk-Home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  height: 85vh;
}

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  height: 85vh;
}

.full-head-content {
  padding: 50px 0;
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  height: 50%;
  position: absolute;
  top: 50%;
  bottom: 0%;
  margin: auto;
}

<div class="sixteen columns fullwidth-header">
  <div class="overlay">
    <div class="container">
      <div class="full-head-content center center">
        ACCESS TO PROFESSIONAL<br /><br /> Bankers
        <br /> Risk Management Specialists<br /> Financial Managers
      </div>
    </div>
  </div>
</div>

score 1 · Answer 1 · answered Aug 11 '17 at 18:18

Don't make it too complicated... ;-) The settings below will work. (I added a background color to substitute for the background image)

.fullwidth-header {
  background-image: url(../images/Risk-Home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  height: 85vh;
}

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  height: 85vh;
  background: #ddd;
}

.container {
  position: relative;
  height: 100%;
}

.full-head-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="sixteen columns fullwidth-header">
  <div class="overlay">
    <div class="container">
      <div class="full-head-content center center">
        ACCESS TO PROFESSIONAL<br /><br /> Bankers
        <br /> Risk Management Specialists<br /> Financial Managers
      </div>
    </div>
  </div>
</div>

score 1 · Answer 2 · answered Aug 11 '17 at 18:22

you may use table/table-cell or flex from display rule

flex

.fullwidth-header {
  background-image: url(../images/Risk-Home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  height: 85vh;
}

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  height: 85vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.full-head-content {
  padding: 50px 0;
}

<div class="sixteen columns fullwidth-header">
  <div class="overlay">
    <div class="container">
      <div class="full-head-content center center">
        ACCESS TO PROFESSIONAL<br /><br /> Bankers
        <br /> Risk Management Specialists<br /> Financial Managers
      </div>
    </div>
  </div>
</div>

table-cell

.fullwidth-header {
  background-image: url(../images/Risk-Home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  height: 85vh;
  
    display:table;
    width:100%;
  
}

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  
    display:table-cell;
   vertical-align:middle;
}

.full-head-content {
  padding: 50px 0;
  
    display:table;/* block that shrinks to content size */
    margin:auto;
}

<div class="sixteen columns fullwidth-header">
  <div class="overlay">
    <div class="container">
      <div class="full-head-content center center">
        ACCESS TO PROFESSIONAL<br /><br /> Bankers
        <br /> Risk Management Specialists<br /> Financial Managers
      </div>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Aug 11 '17 at 18:24

A text-align:center will make your text appear in the center since you gave it a width of 100%. That is, if you want your text to be aligned to the center instead of left.

.fullwidth-header {
  background-image: url(../images/Risk-Home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  height: 85vh;
}

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  height: 85vh;
}

.full-head-content {
  padding: 50px 0;
  vertical-align: middle;
  display: inline-block;
  height: 50%;
  width:100%;
  text-align:center;
  position: absolute;
  top: 50%;
  bottom: 0%;
  margin: auto;
}

<div class="sixteen columns fullwidth-header">
  <div class="overlay">
    <div class="container">
      <div class="full-head-content center center">
        <div class="content">
          ACCESS TO PROFESSIONAL<br /><br /> Bankers
          <br /> Risk Management Specialists<br /> Financial Managers
        </div>
      </div>
    </div>
  </div>
</div>

Vertically center content in a vh height div

3 Answers3