Html 如何水平和垂直居中标题（flexbox）？

我不知道如何使用flexbox将

标题精确地放在页面中央

以下是一个链接：

预期效果：

HTML:

如何水平和垂直居中此文本？？？
任何
思想？？？

---

css:

您可以使用下一个类。它将在元素的水平和垂直方向居中

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="hero centerElement">
  <h1>how to center horizontally and vertically this text ???</h1>
  <h2>any</h2>
  <h3>ideas???</h3>
</div>

.centerElement{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
如何水平和垂直居中此文本？？？
任何
思想？？？

---

希望有帮助。

你可以用下一节课。它将在元素的水平和垂直方向居中

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="hero centerElement">
  <h1>how to center horizontally and vertically this text ???</h1>
  <h2>any</h2>
  <h3>ideas???</h3>
</div>

.centerElement{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
如何水平和垂直居中此文本？？？
任何
思想？？？

---

希望能有所帮助。

您将希望嵌套flex框并将其方向更改为column。如果您想继续使用flexbox，而不是50%的位置攻击，我提供了一个使用flexbox的示例：

.wrap{
显示器：flex；
/* 
弹性方向：立柱保持导航和
垂直排列中的英雄
*/
弯曲方向：立柱；
边框：1px纯红；
高度：500px；
}
.英雄{
显示器：flex；
/*
同样，使用flex-direction:column保持
垂直对齐的嵌套标题
*/
弯曲方向：立柱；
/* 
flex grow告诉英雄沿着主干道成长
父对象的柔性轴。在本例中，我们设置
包裹到弯曲方向：柱，所以。英雄拉伸
垂直地
*/
柔性生长：1；
/*
对齐内容设置子对象的布局
沿着父对象的主轴。在本例中
标题将在垂直中间分组
当然，英雄
*/
证明内容：中心；
/*
对齐项目将子项的布局设置为垂直
到父对象的主轴。所以在这种情况下，它们会聚集在一起
沿水平中心
*/
对齐项目：居中；
边框：1px纯红；
}
.英雄>*{
边框：1px纯黑；
/*
如果没有此文本对齐，标题将
水平居中，但文本位于
标题仍然是左对齐的
*/
文本对齐：居中；
}

如何水平和垂直居中此文本？？？
任何
思想？？？

您需要嵌套flex框并将其方向更改为column。如果您想继续使用flexbox，而不是50%的位置攻击，我提供了一个使用flexbox的示例：

.wrap{
显示器：flex；
/* 
弹性方向：立柱保持导航和
垂直排列中的英雄
*/
弯曲方向：立柱；
边框：1px纯红；
高度：500px；
}
.英雄{
显示器：flex；
/*
同样，使用flex-direction:column保持
垂直对齐的嵌套标题
*/
弯曲方向：立柱；
/* 
flex grow告诉英雄沿着主干道成长
父对象的柔性轴。在本例中，我们设置
包裹到弯曲方向：柱，所以。英雄拉伸
垂直地
*/
柔性生长：1；
/*
对齐内容设置子对象的布局
沿着父对象的主轴。在本例中
标题将在垂直中间分组
当然，英雄
*/
证明内容：中心；
/*
对齐项目将子项的布局设置为垂直
到父对象的主轴。所以在这种情况下，它们会聚集在一起
沿水平中心
*/
对齐项目：居中；
边框：1px纯红；
}
.英雄>*{
边框：1px纯黑；
/*
如果没有此文本对齐，标题将
水平居中，但文本位于
标题仍然是左对齐的
*/
文本对齐：居中；
}

如何水平和垂直居中此文本？？？
任何
思想？？？