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

Question

I still don't really understand how to center divs. 我仍然不太了解如何将div居中。 In this fiddle, you can see I have centered the divs but they're overlapping. 在这个小提琴中，您可以看到我使div居中，但是它们重叠了。 I've set both to display inline-block thinking that would solve it, but that didn't do anything. 我将两者都设置为显示可以解决问题的内联块思维，但没有做任何事情。

https://jsfiddle.net/fyu1sup0/1/ https://jsfiddle.net/fyu1sup0/1/

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

You will need to use a wrapper element. 您将需要使用包装器元素。 Then use transform: translateY(-50%) to adjust the position of the wrapper to the center of the page. 然后使用transform: translateY(-50%)将包装器的位置调整到页面中心。

See https://jsfiddle.net/Labo59nx/ 参见https://jsfiddle.net/Labo59nx/

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

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

Answer 2

Instead of using position: absolute , you could wrap top and bottom in a new wrapper and use flexbox . 除了使用position: absolute ，您可以将top和bottom包装在新包装器中，然后使用flexbox 。

Note that I've also added a height property to the body to make this work. 请注意，我还向body添加了height属性，以完成此工作。

fiddle 小提琴

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

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

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

问题描述

2 个解决方案

解决方案1
0 2017-09-12 11:26:04

解决方案2
-1 2017-09-12 11:23:13

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

问题描述

2 个解决方案

解决方案1 0 2017-09-12 11:26:04

解决方案2 -1 2017-09-12 11:23:13

解决方案1
0 2017-09-12 11:26:04

解决方案2
-1 2017-09-12 11:23:13