Vertically aligned in a div

Question

I'm sorry to post another vertical alignment question but since I'm a total beginner I don't know what else to do.

I have a fullscreen background image and I want to vertically align the h1, p and button sections, so no matter what the screen height is, the text block should always be centered. I tried to achieve this with adding margin-top to the section but it's not perfect. I'm using Bootstrap.

Here is my HTML:

<section id="home">
    <div class="container">
        <div class="row">

            <div class="col-md-6">
                <h1>dolm it</h1>
                <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
                <button type="button" class="btn btn-default white">more</button>
            </div>
        </div>
    </div>
    <!--end container-->
</section>
<!--end home-->

And here's the CSS I've created:

       #home {
            background: -webkit-linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
            background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
            background-size: cover;
            width: 100%;
            height: 100vh;
        }

        #home h1 {
            color: #ffffff;
            font-family: 'Akrobat-ExtraBold';
            font-size: 4.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 32px;
        }

        #home p {
            color: #ffffff;
            font-family: 'Akrobat-Bold';
            font-size: 1.5rem;
        }

        #home .col-md-6 {
            margin-top: 200px;
            padding: 130px 0 130px 0;
        }

You can see the test page here. Thank you for your help.

check this: http://stackoverflow.com/questions/2743989/how-to-vertically-center-divs — Sanjeev Kumar, Oct 21 '16 at 12:54
Thank you for your response and the link. I managed to achieve what I wanted. Since I'm a newbie, I couldn't find this solution by myself. — bijoume, Oct 21 '16 at 13:36

G-Cyrillus · Answer 1 · 2016-10-21T13:09:54.700

You may use display:table or a mix of display:table and flex (if the idea is to shrink p on a few lines) example:

#home {
   background: -webkit-linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
   background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
   background-size: cover;
   width: 100%;
   min-height: 100vh;/* modified */
   /* added from here ============================ */
   display:flex;
   flex-flow:column;
   align-items:center;
   justify-content:center;
   text-align:center;/* optionnal, but not the job of justify-content *nor align-items */
 }
body /* + optionnal*/ , h1, p {
  margin:0;
}
.container {
  display:table;
  width:1%;/* will shrink to fit the wider content */
}
 #home h1 {
   white-space:nowrap;/* keep it on one line and make container same width */
 }
/* ================ end added */
 #home h1 {
   color: #ffffff;
   font-family: 'Akrobat-ExtraBold';
   font-size: 4.9rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   white-space:nowrap;
 }
 
 #home p {
   color: #ffffff;
   font-family: 'Akrobat-Bold';
   font-size: 1.5rem;
   display:table;
 }
 
 #home .col-md-6 {
   /* CSS removed here */
 }

<section id="home">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <h1>dolm it</h1>
        <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
        <button type="button" class="btn btn-default white">more</button>
      </div>
    </div>
  </div>
  <!--end container-->
</section>
<!--end home-->

See comment in CSS to see what is new or removed :)

For the older browser, the only display:table version : http://codepen.io/anon/pen/JRwOaV

html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-row;
}
#home {
  display: table-cell;
  background: -webkit-linear-gradient(rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
  background: linear-gradient(rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
  vertical-align: middle;
}
body,
h1,
p {
  margin: 0;
}
#home h1 {
  white-space: nowrap;
  /* keep it on one line and make container same width */
  color: #ffffff;
  font-family: 'Akrobat-ExtraBold';
  font-size: 4.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
}
#home p {
  color: #ffffff;
  font-family: 'Akrobat-Bold';
  font-size: 1.5rem;
  display: table;
}
#home .col-md-6 {
  display: table;
  /* again to shrink content on itself*/
  width: 1%;
  margin: auto;
  text-align: center;
}

<section id="home">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <h1>dolm it</h1>
        <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
        <button type="button" class="btn btn-default white">more</button>
      </div>
    </div>
  </div>
  <!--end container-->
</section>
<!--end home-->

Vertically aligned in a div

1 Answers1