Wie bekomme ich diese divs Stapel übereinander in der Mitte der Seite?

Ich verstehe immer noch nicht wirklich, wie man Divs zentriert. In dieser Geige können Sie sehen, dass ich die Divs zentriert habe, aber sie überlappen sich. Ich habe beide eingestellt, Inline-Block-Denken anzuzeigen, das es lösen würde, aber das hat nichts getan.Wie bekomme ich diese divs Stapel übereinander in der Mitte der Seite?

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

Quelle

2017-09-12 user8473431

-1

Statt position: absolute verwenden, könnten Sie top und bottom in einem neuen Wrapper wickeln und flexbox verwenden.

Beachten Sie, dass ich auch eine height -Eigenschaft an die body hinzugefügt haben, um diese Arbeit zu machen.

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>

Quelle

2017-09-12 11:23:13 sol

Sie ein Wrapper-Element verwenden müssen. Verwenden Sie dann transform: translateY(-50%), um die Position des Wrappers in der Mitte der Seite anzupassen.

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

Quelle

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>

Quelle

2017-09-12 11:28:53

Wie bekomme ich diese divs Stapel übereinander in der Mitte der Seite?

Antwort

Verwandte Themen