Question

如何在不设置h1的情况下将middle标记置于我的banner的{{1}}中心？

HTML

padding

CSS

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

你能用.banner { height: 500px; width: 100%; background-color: #000; } .bannerContainer { }和vertical-align: middle;等做点什么吗？

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

仅当横幅高度保持停滞

时才有效

Answer 2

使用transform，您可以像这样集中定位：http://jsfiddle.net/otghf6zo/1/

添加此代码会将标题定位在包含div的正中间，而不管大小。

h1 {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Answer 3

您可以像这样使用 CSS表格

＆＃13;

.banner {
  height: 500px;
  width: 100%;
  background-color: #000;
  display: table;
  text-align: center;
  color: white;
}

.bannerContainer {
  display: table-cell;
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

或 Flexbox 就像这样

＆＃13;

.banner {
  height: 500px;
  width: 100%;
  background-color: #000;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}

＆＃13;

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

＆＃13;

如果没有“填充作弊”，我的标题如何居中？

3 个答案: