Wie kann ich meine erste Reihe vertikal ausrichten

Question

I align-items-center Klasse in Reihe Abschnitt verwenden zum Zentrum, aber es funktioniert nicht:

<div class="container"> 
 
    <div class="row align-items-center"> 
 
     <div class="col-12 bg-warning"> 
 
      hello 
 
     </div> 
 
    </div> 
 
</div>

Ich möchte diese Linie zentriert auf Seite vertikal wie ich im Bild zeigen:

Answer 1

Ihr Code funktioniert gut, aber Sie müssen eine height setzen. Im Moment nahmen die .container und .row die Höhe des Inhalts. Also muss man die ein height setzen .row und Ihre .col sollte vertikal zentrierte sein:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row align-items-center" style="height:500px;"> 
 
     <div class="col-12 bg-warning"> 
 
      hello 
 
     </div> 
 
    </div> 
 
</div>

Um vertikale Mitte auf dem sichtbaren Bereich Ihrer Webseite zu installieren, können Sie height:100vh; anstelle der Verwendung feste Größe.

Answer 2

Sie müssen die Seite besetzen 100% hoch machen.

html, body, .container, .row { 
    height: 100%; 
} 

Answer 3

Versuchen Sie folgendes: https://jsfiddle.net/q1ypnzg8/2/

<div class="container divouter"> 
    <div class="row align-items-center divmiddle"> 
     <div class="col-12 bg-warning divinner"> 
      hello 
     </div> 
    </div> 
</div> 

CSS

.divouter { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

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

.divinner { 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

Answer 4

CSS Grenzen hat, wenn es darum einen Text dort in der Mitte kommt. Um die Kompatibilität mit dem Browser sicherzustellen, rate ich Ihnen, die Inline-Ausrichtungseigenschaft zu verwenden.

<div align="center">Content goes here.</div> 

Andere Eigenschaften, die Sie im Falle eines CSS enthalten können:

#divID{ margin:auto text-align: center;

} 

Obwohl, würde ich die Marge Eigenschaft auto bevorzugen, da der Text align in bestimmten fehlschlagen Browser für bestimmte Tags.

Answer 5

Sie können diese CSS für .row.align-Artikel-Zentrum

.row.align-items-center { 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
\t -webkit-transform: translate(-50%, -50%); 
 
\t -moz-transform: translate(-50%, -50%); 
 
\t -ms-transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
}

Hoffnung hinzufügen dies helfen wird.