如何將元素居中 <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;
}

並據此進行調整