Javascript 如何将元素集中在一起<；部门>；及<；h1>；，自上而下？

我试着模仿一下下面的网站：一旦你点击第一页，你就会看到一台电脑和它下面的一小段

在使用dev webtool分析站点之后，我仍然无法正确地将元素居中。我尝试了使用

位置：相对
的
顶部：50%
，但它没有正确居中

我试图分解成必要的CSS，但仍然无法重新创建它

代码：

我可能会错过什么或做得不正确？他们如何处理元素的大小调整？如有任何建议或指导，将不胜感激

提前感谢您，我们一定会接受并投票表决您的答案。
您就快到了。
html
和
body
都需要
height:100%，否则它的子对象将不会是视口的100%

.container
不需要
高度：100%。由于您在
顶部已经有
.container
：50%
，只需使用
转换：translateY（-50%）
将其移动回其自身宽度的50%，使其中心位于浏览器的中心


body，html{
身高：100%；
}
.集装箱{
位置：相对位置；
填充：.5em；
保证金：0自动；
最大宽度：400px；
文本对齐：居中；
最高：50%；
转化：translateY（-50%）；
}
#旋转容器div{
颜色：#fb3131；
字体大小：40px；
字体大小：粗体；
显示：块；
}

居中
我们没有定义
我们是一家专注于数字技术的创意机构

试试：

并相应调整
@MichelCoker非常感谢您的回复！如果你不介意的话，请回答几个问题。为什么
class=“container”
的父级也需要是相对的？这样子级
class=“container”
就可以相对于父级移动其内容（
top:50%）；
？你能详细说明一下什么是translateY（-50%）正在做什么？为什么
。容器不需要高度：100%？flexbox比正式的更受欢迎吗？为什么
html
也必须是100%？最后，那个特定的站点处理调整是如何响应的？@JoKo 1）我的错，我在看了你的整个布局之前就把它放进去了，
position:relative不是必需的，除非子对象是
位置：绝对。2） ，3）因为您将该元素居中，而不是其内部的内容，所以它不需要100%的高度。4） 这是一个意见问题，但可能是CSS媒体查询。非常感谢你，迈克尔！
  <div style={{height: '100%’}}>
      <div className="container">
        <div id="rotate-container">
          <div>
            Center Me
          </div>
        </div>
        <h1> We are undefined</h1>
        <p>We're a creative agency with a focus on digital.</p>
      </div>
  </div>

.container {
  height: 100%;
  position: relative;
  padding: .5em;
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  top: 50%;
}

#rotate-container {

  div {
    color: #fb3131;
    font-size: 40px;
    font-weight: bold;
    display: block;
  }
}

body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}

.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}