水平和垂直居中 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 二维变换

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

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

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

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

Answer 2

body{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  width: 100%;
  min-height: 100vh;
}

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

如果可以使用flex，请尝试使用flex。

如果您想获得更多关于 flex 的信息，

访问此处https://codepen.io/enxaneta/pen/adLPwv?q=flex&limit=all&type=type-pens

水平和垂直居中 h1

Centering h1 horizontally and Vertically

html

css

center

responsive

解决方案 1：使用 CSS 二维变换

解决方案 2：使用 flexbox