如何在頁面中間將這些div堆疊在彼此的正上方？

我還是不太瞭解如何居中div。在這個小提琴中，你可以看到我已經集中了divs，但它們重疊。我已經設置了顯示可以解決它的內聯塊思想，但是這沒有做任何事情。如何在頁面中間將這些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%; 
}

來源

2017-09-12 user8473431

-1

而不是使用position: absolute的，你可以在一個新的包裝包top和bottom，並使用flexbox。

請注意，我也已將height屬性添加到body以使此工作。

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>

來源

2017-09-12 11:23:13 sol

您將需要使用一個包裝元素。然後使用transform: translateY(-50%)將包裝的位置調整到頁面中心。

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

來源

2017-09-12 11:26:04 kinggs

-1

.top { 
 
    background-color: blue; 
 
    width: 300px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
} 
 

 
.bottom { 
 
    width: 300px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    background: red; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    color: white; 
 
}

<body> 
 

 
    <div class = "top"> 
 
     <div class="container"> 
 
     <h1>header</h1> 
 
     </div> 
 
    </div> 
 

 
    <div class = "bottom"> 
 
     <div class="container"> 
 
     <h1>text</h1> 
 
     </div> 
 
    </div> 
 

 

 
</body>

來源

2017-09-12 11:28:53

如何在頁面中間將這些div堆疊在彼此的正上方？

回答

相關問題