尝试使用表格单元格居中对齐

Question

我是新手，所以这可能真的很愚蠢，但现在就去了。

我试图将div垂直对齐到我的页面中间，但它似乎并没有起作用。文本总是加载在左上角？

＆＃13;

＆＃13;

/*=======================================
                   HOME
    =======================================*/

#home {
  height: 100%;
}

#home-cover {
  height: 100%;
  background-image: url("../img/bg-home.jpg");
}

#home-content-box {
  width: 100%;
  height: 100%;
  display: table;
}

#home-content-box-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#home-heading h3 {
  color: #fff;
  font-size: 55px;
  font-weight: 700;
  margin;
  20px 0 20px 0;
}

＆＃13;

<!-- Home -->
<section id="home">

  <div id="home-cover" class="bg-paralax animated fadeIn">
    <div id="home-content-box">
      <div id="home-conent-box-inner">
        <div id="home-heading" class="animated zoomIn">
          <h3>Watch Out <br> The Modern Responsive Website!
          </h3>
        </div>
        <div id="home-btn" class="animated zoomIn">
          <a class="btn btn-lg btn-general btn-white" href="#work" role="button" title="View Our Work">View Our Work</a>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的第三个div类不正确＆＃34; home-conent-box-inner＆＃34; ＆＃34;而不是home-content-box-inner＆＃34;