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

Question

I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.

After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative , yet it is not centered correctly.

I tried to break down to the necessary CSS, but still not able to recreate it.

Code:

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

What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.

Thank you in advance and will be sure to accept and upvote answer.

Answer 1

You're close. both html and body need to be height: 100%; , too, otherwise it's children won't be 100% of the viewport.

.container doesn't need height: 100%; . Since you already have .container at top: 50%; , just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.

 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> 

You can also use flexbox with 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

Try:

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

And adjust accordingly