html - 在 div 中垂直对齐

Question

<分区>

Answer 1

您可以使用 display:table 或混合使用 display:table 和 flex (如果想要将 p 缩小几行) 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-->

查看 CSS 中的注释以查看新增内容或删除的内容:)

对于较旧的浏览器，仅显示:表格版本: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-->