1

I have tried all the suggested methods I could find on this subject but cannot get any to work. I vertically aligned the image with the vertical-align/line-height method but cannot figure out how to vertically align the text boxes.

-- url removed after issue solved --

Scroll down to the 2nd or 3rd problem to see examples of the type of page I need this on. I am hoping someone with more experience than me can immediately spot where I'm going wrong, I can provide relevant snippets of code if helpful.

Thanks in advance

Jacob94
  • 53
  • 1
  • 1
  • 9
  • The problem or the issue is not clear even from the example you regarded in the URL. I think you may need to include some code in your question or at least an abstract demo on an online IDE such as [tag:jsbin] or [tag:jsfiddle]. – SaidbakR May 10 '15 at 22:50

3 Answers3

15

Flexbox takes the pain out of a lot of layouts, vertical centering being one of them.

Method One:

.container {
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

Method Two:

.container {
  height: 100vh;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
}

Your HTML just has to look like this:

<div class="container">

   <div>
      whatever content you want (including nested div's, other elements) goes in here
   </div>

</div><!-- .container -->
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
9

Put the text in a containing div and give that div the following style (note the 100vh container needs to be non statically positioned):

.vertical-center{
    position: absolute;
    top:50%;
    left: 0%;
    transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
}

This will break down if the 100vh container is smaller than the area the text would take up, so it'll need an appropriate min-height.

Dylan Watt
  • 3,357
  • 12
  • 16
  • Thank you! Any other possible issues other than using a min-height? – Jacob94 May 10 '15 at 22:59
  • positioning the content absolutely is probably not the best idea for the exact reason you described - it takes it out of the document flow and the element has no idea how tall it needs to be to contain it's children. – Adam Jenkins May 10 '15 at 23:04
  • @DylanWatt - flexbox support is fantastic - IE10+ and all other modern browsers. IE9 usage is low and on the decline. If you have to support IE8, then your transform solution won't work either. – Adam Jenkins May 10 '15 at 23:05
  • @adam, if the problem is as stated, the image seems to be larger than the text anyway, so that will determine the size of the parent. Certainly absolute positioning should be done sparingly. IIRC ie9 is ~3%. Not huge, but no reason to disallow it if you don't have to. – Dylan Watt May 10 '15 at 23:09
2

This may be the simplest way to do it. In your div that has height: 100vh; add a line-height with 100vh:

.hero{
  height: 100vh;
  line-height: 100vh;
}

Then in your div that contains your text make sure it looks like this.

.hero-caption{
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height:1.5em;
  margin: 0 auto;
  float: none;
  width:100%;
}

Now if you are using Bootstrap then do the following.

HTML:

<header>
  <div class="col-md-12 caption">
    <h1>Hello World, Hi World</h1>
  </div>
</header>

CSS

header{
  background: blue;
  color: white;
  height: 100vh;
  line-height: 100vh;
}

.caption{
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height:1.5em;
  margin: 0 auto;
  float: none;
}
Bryan
  • 65
  • 1
  • 6