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

并相应调整

如何将元素集中在一起<div>和<h1>，从上到下？

2 个答案: