html - 如果没有 "padding-cheat"，我的标题如何居中？

Question

如何在不设置 padding 的情况下将我的 h1 标签置于 banner 的 middle 中心？

HTML

<div class="banner">
    <div class="bannerContainer">
        <h1>Group Title</h1>
    </div>
</div>

CSS

.banner {
  height: 500px;
  width: 100%;
  background-color: #000;
}
.bannerContainer {
}

你能用 vertical-align: middle; 和 display: table-cell; 等做点什么吗？

Answer 1

有几个选项，我建议仔细查看 - https://css-tricks.com/centering-css-complete-guide/

一个选项是:http://jsfiddle.net/dtq7fed3/它在容器上使用与横幅高度相同的行高。

.banner {
   height: 500px;
   width: 100%;
   background-color: #000;
}
.bannerContainer {
   text-align: center;
   line-height: 500px;
   color: #fff;
}

这仅在横幅高度将保持不变时才有效