Bootstrap 4 Orta Dikey ve Yatay Hizalama

Sadece formun bulunduğu bir sayfam var ve formun ekranın ortasına yerleştirilmesini istiyorum.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

justify-content-centerHizalar formu yatay, ama dikey olarak hizalamak için anlamaya olamaz. Ben kullanmayı denedi align-items-centerve align-self-centerancak çalışmıyor.

Neyi kaçırıyorum?

DEMO

Güncelleme 2019 - Bootstrap 4.3.1

Orada gerek için ekstra CSS . Bootstrap'a zaten eklenenler işe yarayacak. Formdaki kapların tam yükseklikte olduğundan emin olun . Bootstrap 4 şimdi h-100% 100 yükseklik için bir sınıfa sahip ...

Dikey merkez:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

eşya (lar) ortada olan kabın yüksekliği% 100 olmalıdır (veya istenen yükseklik ortalanmış parçaya göre ne olursa olsun)

Not: Herhangi bir öğede height:100%( yüzde yükseklik ) kullanırken , öğe kabının yüksekliğini alır . Modern tarayıcılarda istenen yüksekliği elde height:100vh;etmek yerine vh birimleri kullanılabilir %.

Bu nedenle, html, body {height: 100%} ayarlayabilir veya yeni min-vh-100sınıfı kapsayıcıda kullanabilirsiniz h-100.

Yatay merkez:

• text-centerMerkezi için display:inlineelemanları ve kolon içeriğine
• mx-auto esnek elemanların içinde ortalamak için
• offset-*veya sütunları ortalamakmx-auto için kullanılabilir ( ).col-
• justify-content-centeriçin merkezi sütun ( col-*iç)row

Bootstrap 4'te Dikey Hizalama
Bootstrap 4 tam ekran ortalanmış form
Bootstrap 4 merkez giriş grubu
Bootstrap 4 yatay + dikey orta tam ekran

Bu iş benim için:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

flexbox size yardımcı olabilir. burada bilgi

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

Formunuzu ortalamak için bir şeye ihtiyacınız var. Ancak, html'niz ve vücudunuz için bir yükseklik belirtmediğiniz için, görünümü değil, içeriği sarar. Başka bir deyişle, öğenin ortalanacağı yer yoktu.

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

Önyükleme, metni ortalamak için metin merkezine sahiptir. Örneğin

<div class="container text-center">

Aşağıdakileri değiştirirsiniz

<div class="row justify-content-center align-items-center">

aşağıdakilere

<div class="row text-center">

Hiçbiri benim için çalışmadı. Ama biri yaptı.

Bootstrap 4. .row sınıfı artık görüntülendiğinden: flex, dikey olarak ortalamak için herhangi bir sütunda yeni hizalama-kendi-merkezli flexbox yardımcı programını kullanabilirsiniz:

<div class=”row”>
   <div class=”col-6 align-self-center”>
      <div class=”card card-block”>
      Center
      </div>
   </div>
   <div class=”col-6">
      <div class=”card card-inverse card-danger”>
      Taller
      </div>
   </div>
</div>

Bunu https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff adresinden öğrendim.

Bu IE 11'de Bootstrap 4.3 ile çalışıyor . Diğer cevaplar benim durumumda IE11 çalışmıyor iken.

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

Bu Kodu CSS'de Kullan:

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

Bootstrap 4 grid sistemi ve Angular * ngFor döngüsüyle ilgili bir sorun yaşadığım için buraya geldim. Ben ngFor uygulayan div bir col justify-content-center sınıfı uygulayarak düzeltildi:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

sonuç verir:

Doktordan (Bootsrap 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around