在 div 中垂直对齐 [重复]

Question

我很抱歉发布另一个垂直对齐问题，但由于我是一个完全的初学者，我不知道还能做什么。

我有一个全屏背景图像，我想垂直对齐 h1、p 和按钮部分，所以无论屏幕高度是多少，文本块都应该始终居中。我试图通过在该部分添加 margin-top 来实现这一点，但这并不完美。我正在使用 Bootstrap。

这是我的 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-->

这是我创建的 CSS：

       #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;
        }

你可以看到测试页面here。感谢您的帮助。

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 中的评论以了解新增或删除的内容:)

对于旧版浏览器，只有 display:table 版本：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-->