Question

我仍然不懂得如何集中div。在这个小提琴中，你可以看到我把div放在了中心，但它们重叠了。我已经设置了两个显示内联块思维来解决它，但是没有做任何事情。

html, body {
  font-family:;
  margin:0 auto;
  text-transform: lowercase;
  font-family: Europa;
  letter-spacing: 0.5px;
}

.container {
  padding:0;
  margin:0 auto;
}

.top {
  background-color: blue;
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  display:inline-block;
}
.top h1 {
  width:100%;
  font-size:50px;
  color:#2CCDAD;
}

.bottom {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  display:inline-block;
}
.bottom h1 {
  font-size:40px;
  color:black;
  width:100%;
}

Answer 1

您需要使用包装元素。然后使用transform: translateY(-50%)将包装器的位置调整到页面中心。

请参阅https://jsfiddle.net/Labo59nx/

＆＃13;

html, body {
  font-family:;
  margin:0 auto;
  text-transform: lowercase;
  font-family: Europa;
  letter-spacing: 0.5px;
}

.wrapper {
  position: absolute;
  width:300px;
  top: 50%;
  left: 50%;
  margin: 0 0 0 -150px;
  transform: translateY(-50%);
}

.container {
  padding:0;
  margin:0 auto;
}

.top {
  background-color: blue;
  width: 300px;
  height: 200px;
  z-index: 15;
  display:inline-block;
}
.top h1 {
  width:100%;
  font-size:50px;
  color:#2CCDAD;
}

.bottom {
  background-color:red;
  width: 300px;
  height: 200px;
  z-index: 15;
  display:inline-block;
}
.bottom h1 {
  font-size:40px;
  color:black;
  width:100%;
}

＆＃13;

<body>

    <div class="wrapper">
    
      <div class = "top">
        <div class="container">
        <h1>header</h1>
        </div>
      </div>

      <div class = "bottom">
        <div class="container">
        <h1>text</h1>
        </div>
      </div>
    
    </div>


</body>

＆＃13;

Answer 2

您可以将position: absolute和top包装在新的包装中，而不是使用bottom，并使用flexbox。

请注意，我还在height添加了body属性，以便完成此项工作。

fiddle

＆＃13;

html,
body {
  font-family;
  margin: 0;
  text-transform: lowercase;
  font-family: Europa;
  letter-spacing: 0.5px;
}

body {
  height: 100vh;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.container {
  padding: 0;
  margin: 0 auto;
}

.top {
  background-color: blue;
  width: 300px;
  height: 200px;
}

.top h1 {
  width: 100%;
  font-size: 50px;
  color: #2CCDAD;
}

.bottom {
  width: 300px;
  height: 200px;
  background: pink;
  /* for demo */
}

.bottom h1 {
  font-size: 40px;
  color: black;
  width: 100%;
}

＆＃13;

<div class="wrapper">

  <div class="top">
    <div class="container">
      <h1>header</h1>
    </div>
  </div>

  <div class="bottom">
    <div class="container">
      <h1>text</h1>
    </div>
  </div>
</div>

＆＃13;

如何在页面中心将这些div叠加在一起？

2 个答案: