如何将元素居中 <div> 和 <h1> ， 从上到下？

Question

我正在尝试模仿以下站点： http : //weareundefined.be/ ，一旦您通过单击它来通过第一页，就会在其下有一台计算机和一小段内容。

使用dev webtool分析网站后，我仍然无法正确确定元素的中心。 我尝试了top: 50% ， position: relative ，但未正确居中。

我试图分解为必要的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>

CSS（SCSS）：

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

我会丢失什么或做错什么？ 他们如何处理元素的大小调整？ 任何建议或指导将不胜感激。

预先谢谢您，一定会接受并支持答案。

Answer 1

你近了 html和body必须是height: 100%; ，否则，它的孩子将不会是100％的视口。

.container不需要height: 100%; 。 因为您已经有.container在top: 50%; ，只需使用transform: translateY(-50%); 将其移回其自身宽度的50％，因此其中心位于浏览器的中心。

 body, html { height: 100%; } .container { position: relative; padding: .5em; margin: 0 auto; max-width: 400px; text-align: center; top: 50%; transform: translateY(-50%); } #rotate-container div { color: #fb3131; font-size: 40px; font-weight: bold; display: block; } 

 <div style="height:100%;"> <div class="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> 

您还可以将flexbox与align-items: center;

 body, html { height: 100%; } .container { position: relative; padding: .5em; margin: 0 auto; max-width: 400px; text-align: center; } #rotate-container div { color: #fb3131; font-size: 40px; font-weight: bold; display: block; } 

 <div style="height:100%; display: flex; align-items: center;"> <div class="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> 

Answer 2

尝试：

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

并据此进行调整