Boostrap/CSS Always keep content perfectly centred on page

Question

I've been try to make my content stay centred at all time. I have the width centred with: text-aligned, but I can't figure out how to vertically centre my content. Here is the code for the element:

HTML:

  <div class="content">
    <img src="logo.png">
    <h1>HELLOWORLD</h1>
    <p class="lead">CREATED BY JOHN DOE</p>
    <button class="btn">Signup</button>  
  </div>

CSS:

.content {
  text-align: centre;
}

.content h1{
  color: white;
  font-family: NoveBold;
  font-size: 150px;
  line-height:94%
}

.content p{
  color: white;
  font-family: NoveLight;
  font-size: 30px;
}

.content img{
}

.content btn {
}

Does anyone know a fix on how to automatically vertically align this content so its centred on the page?

A simple search of SO previous asked questions would show you that this has been asked and answered **many* times. — Paulie_D, Jul 06 '14 at 18:39
[Centering in the Unknown](http://css-tricks.com/centering-in-the-unknown/). — silvenon, Jul 06 '14 at 19:21

score 0 · Accepted Answer · answered Jul 06 '14 at 19:03

0

Try this:

.outter {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
.content {
    text-align: center;
    display: inline-block;
    width: auto;
}
.content h1{
  color: black;
  font-family: NoveBold;
  line-height:94%;
}

.content p{
  color: black;
  font-family: NoveLight;
}

Demo

answered Jul 06 '14 at 19:03

imbondbaby

6,351
3
21
54

It worked like a charm! Thank you, I was just playing around with tables to see if it would work. Thanks so much! – Justin Jul 06 '14 at 19:16

Boostrap/CSS Always keep content perfectly centred on page

1 Answers1