水平和垂直居中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% left和top基本坐标，然后将其翻译为顶部和留下一半自己的尺寸。请注意，您必须在父级上声明显式高度，否则该技巧将无效。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

解决方案2：使用flexbox

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如果您想了解有关flex，

的更多信息

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