将页面中间的文本居中放在另一个上面

Question

我在尝试创建响应式网站的主页时遇到了一些问题。我是在开始，我不知道如何做到这一点。基本上我试图让一些文本在另一个上面，但让它可读。我也尝试让它具有移动响应能力以及我现在所拥有的只是看起来不正确。

<p>Hello, there!</p>

互动设计专业学生。

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Work</a></li>
    <li role="presentation"><a href="#">Get In Touch</a></li>
</ul>

和我的css

h1 {
    left: 0;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 100;
    font-size: 51px;
    padding-top: 80px;
    margin: 15px;
}

p {
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 50%;
    width: 100%;
    color: #232324;
    font-size: 160px;
    margin:15px;
}

Answer 1

您可以使用Flexbox和:after 伪元素执行此操作，此处为完整Demo

body {
  background: #282828;
  color: white;
  font-family: sans-serif;
}
.homepage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 25px;
  text-align: center;
  position: relative;
  width: 100%;
}
h1:after {
  content: "Hello There";
  text-align: center;
  width: 100%;
  font-size: 75px;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  opacity: 0.2;
  transform: translate(-50%, -50%);
}

<div class="homepage">
  <h1>Another interactive design student.</h1>
</div>