水平和垂直居中 h1

Question

我想<h1>居中。

问题： 当我水平居中文本时，我不能垂直居中，如果我垂直居中，那么我不能水平居中。

我的代码：

h1 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 28px;
}

.main-text {
  text-align: center;
}

<header>
  <div class="main-text">
    <h1>This is Centered Text.</h1>
  </div>
</header>

我试过的： 这里是我试过的一些 CSS。

.main-text {
        text-align: center;
        vertical-align: middle;   
    }

下面的代码有效，但文本没有响应。

.main-text {
    position: absolute;
    top: 30%;
    left: 30%;

}

我希望它看起来如何：

Answer 1

解决方案 1：使用 CSS 2D 转换

您可以使用<h1>绝对定位元素的古老技巧，使用50%forleft和top基数坐标，然后将其平移到其自身尺寸的一半的顶部和左侧。请注意，您必须在父级上声明一个明确的高度，否则该技巧将不起作用。

h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 28px;
}

.main-text {
    position: relative;
    width: 100%;
    
    /* You need to define an explicit height! */
    height: 100vh;
}

.main-text h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

<header>
<div class="main-text">
  <h1>This is Centered Text.</h1>
</div>
</header>

解决方案 2：使用 flexbox

由于 flexbox 得到了非常广泛的支持，因此您也可以使用它。这可以通过简单地在父包装元素上声明以下规则来完成：

.main-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 28px;
}

.main-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    
    /* You need to define an explicit height! */
    height: 100vh;
}