如何在完整的页面中心动态创建标题

Question

我目前正试图找出如何使标题在我的webpage上完全集中在所有网页上的纵向和横向/不依赖于屏幕尺寸。我目前正在使用<br>代码。

这就是我希望它看起来像

但是在调整大小时，我希望它能够改变字体大小并保持居中。

Answer 1

您可以使用视口单元。

<h1 style="font-size: 30vh;"> Zakaria Ridouh </h1>

参考：https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Answer 2

你可以尝试这个：

删除#intro color: white; /* width: 50%; */Remove this one background: rgba(0, 0, 0, 0);

CASE

Answer 3

你应该增加它将在该视口中自动设置的Zakaria Ridouh文本的字体大小，如

<h1 style="font-size: 30em;"> Zakaria Ridouh </h1>

Answer 4

如果您尝试将元素垂直和水平居中，请尝试以下方法：

HTML：

<div class="wrapper">
  <h1>title here</h1>
</div>

CSS：

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 30px;
  background: #fafafa;
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

JSFiddle