Zentriere ein DIV horizontal und vertikal ohne feste Höhe

-3

Ich möchte, dass der Inhalt vertikal und horizontal zentriert wird, aber er wird nur horizontal zentriert. Das Problem ist, dass ich keine feste Höhe habe. Danke Leute für Hilfe!Zentriere ein DIV horizontal und vertikal ohne feste Höhe

html, 
 
body { 
 
    height: 100% margin: 0; 
 
    overflow: hidden; 
 
} 
 
.content { 
 
    width: 100%; 
 
    height: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
    text-align: center; 
 
}

<div class="content"> 
 
    <h1>Welcome to the website!</h1> 
 
</div>

Quelle

2017-02-14 Daniel

wo ist Ihre HTML –

Sind Sie positiv, dass die Antwort nicht in diesem Thread gefunden werden http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for- All-Browser? – Turnip

Danke, fand die Lösung! – Daniel

diesen Code folgen.

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content-wrapper{ 
 
    background-color: #121212; 
 
    display: block; 
 
    left: 0; 
 
    height: 100%; 
 
    padding: 15px; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.content{ 
 
    background-color: #f5f5f5; 
 
    display: table; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.centent-cell{ 
 
    display: table-cell; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
} 
 
h1{ 
 
    color: #121212; 
 
}

<div class="content-wrapper"> 
 
    <div class="content"> 
 
<div class="centent-cell"> 
 
    <h1>Welcome to the website!</h1> 
 
    </div> 
 
</div> 
 
</div>

Quelle

2017-02-14 13:50:41 Rahul

Sie können auf diese Weise ein Element in Bezug auf das übergeordnete leicht zentrieren (unter der Annahme, dass die Mutter position: relative; hat).

In Ihrem Beispiel:

h1 { 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Sie können auch auf dem Bildschirm in der Mitte zentriert position: fixed; anstelle.

Quelle

2017-02-14 13:51:20

Hier ist ein Beispiel dafür, was Sie brauchen:

<section> 
    <div class="centerize"> 
     <div class="v-center"> 
      <div class="box">Say my name!</div> 
     </div> 
    </div> 
</section>

und CSS

section { 
    height: 100vh; 
    background: #fff; 
} 

.centerize { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

.v-center { 
    display: table-cell; 
    vertical-align: middle 
} 

.box { 
    background: #000; 
    width: 10%; 
    margin: 0 auto; 
}

Quelle

2017-02-14 13:56:10

HTML

<body > 
    <div class="content"> 
    <h1>Welcome to the website!</h1> 
    </div> 
</body>

CSS

Der Code of Conduct

html,body { 
    height : 100%; 
    width : 100%; 
} 
.content { 
    height : 100%; 
    width : 100%; 
    display: table; 
} 
h1 { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
}

Quelle

2017-02-14 13:59:21

Zentriere ein DIV horizontal und vertikal ohne feste Höhe

Antwort

Verwandte Themen