Bootstrap 4 Alignment Tengah Vertikal dan Horisontal

163

Saya memiliki halaman di mana hanya formulir yang ada dan saya ingin formulir ditempatkan di tengah layar.

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

The justify-content-centerdisejajarkan bentuk horizontal, tapi aku tidak bisa mencari cara untuk menyelaraskan secara vertikal. Saya sudah mencoba menggunakan align-items-centerdan align-self-center, tetapi tidak berhasil.

Apa yang saya lewatkan?

DEMO

— pengguna348173
sumber

322

Pembaruan 2019 - Bootstrap 4.3.1

Ada tidak perlu untuk CSS ekstra . Apa yang sudah termasuk dalam Bootstrap akan berfungsi. Pastikan wadah formulir penuh . Bootstrap 4 sekarang memiliki h-100kelas untuk tinggi 100% ...

Pusat vertikal:

<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

ketinggian wadah dengan item (s) ke tengah harus 100% (atau apa pun ketinggian yang diinginkan relatif terhadap item tengah)

Catatan: Saat menggunakan height:100%( persentase tinggi ) pada elemen apa pun, elemen tersebut mengambil ketinggian wadah itu . Di browser modern, unit vh height:100vh;dapat digunakan alih-alih %untuk mendapatkan ketinggian yang diinginkan.

Oleh karena itu, Anda dapat mengatur html, body {height: 100%}, atau menggunakan min-vh-100kelas baru pada wadah h-100.

Pusat horisontal:

text-centerke pusat display:inlineelemen & konten kolom
mx-auto untuk memusatkan elemen fleksibel di dalam
offset-*atau mx-autodapat digunakan untuk memusatkan kolom ( .col-)
justify-content-centerke pusat kolom ( col-*) di dalamrow

Vertical Align Center dalam Bootstrap 4
Bootstrap 4 bentuk terpusat layar penuh
Bootstrap 4 kelompok input tengah
Bootstrap 4 layar horizontal + vertikal tengah penuh

— Zim
sumber

Apakah <section>boleh menggunakan tag, atau haruskah seseorang menempel <div>untuk memusatkan konten secara horizontal dan vertikal di viewport? Saya punya situs yang sudah ada yang punya halaman dengan bagian yang mengubah warna dan / atau gambar latar belakang.

— Adrian

Tidakkah seharusnya anak langsung dari baris menjadi .col?

— Miguel Stevens

7

Jawaban ini sedikit rusak. Anda secara eksplisit menyatakan "TIDAK ADA PERLU untuk CSS tambahan" tetapi itu salah. Dalam contoh kode Anda, ini menunjukkan Anda harus menetapkan tubuh dan html menjadi 100% di CSS di luar Bootstrap 4. Tanpa CSS tambahan ini, solusi Anda tidak berfungsi.

— Mayor Mayor

1

Tidak, tubuh dan html bukan "di luar" .. Bootstrap kelas CSS juga dapat ditambahkan kepada mereka! codeply.com/go/5ifNMHKUEy @dawn .. apa yang tidak berhasil? Komentar Anda tidak membantu.

— Zim

Kontainer tidak perlu 100% tetapi h-100 justify-content-center align-items-centerberhasil

— JMP

18

Ini bekerja untuk saya:

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

— karembadawy
sumber

1

Jangan lupa untuk menambahkan gaya css:

<style type="text/css">     html, body{       height: 100%;     }      .full-page{       height: 100vh;       width: 100vw;     } </style>

— pyOwner

15

flexbox dapat membantu Anda. info di sini

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

— shades3002
sumber

10

Anda perlu sesuatu untuk memusatkan formulir Anda. Tetapi karena Anda tidak menentukan tinggi untuk html dan tubuh Anda, itu hanya akan membungkus konten - dan bukan viewport. Dengan kata lain, tidak ada ruang tempat memusatkan item.

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

— Bram Vanroy
sumber

1

Juga, h-100kelas util dapat digunakan untuk height:100%di Bootstrap 4.

— Zim

1

Saya sekarang menyarankan untuk menggunakan solusi @ZimSystem karena tidak memerlukan CSS khusus dan hanya menggunakan kelas yang disediakan oleh Bootstrap.

— Bram Vanroy

1

@Ramramanroy seperti yang Anda katakan saya menggunakan solusi ZimSystem tetapi tidak berhasil untuk saya. solusi Anda bekerja pada pembaruan versi 4.0.0 dan 4.1.0 juga

— Sahan Pasindu Nirmal

9

Bootstrap memiliki pusat teks untuk memusatkan teks. Sebagai contoh

<div class="container text-center">

Anda mengubah yang berikut ini

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

berikut ini

<div class="row text-center">

— ciaran kehoe
sumber

7

Tidak ada yang berhasil untuk saya. Tapi yang dia lakukan.

Karena kelas Bootrowap 4 .row sekarang ditampilkan: flex Anda cukup menggunakan utilitas flexbox align-self-center baru pada kolom apa saja untuk memusatkannya secara vertikal:

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

Saya mempelajarinya dari https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

— Paulo Pedroso
sumber

2

Ini bekerja di IE 11 dengan Bootstrap 4.3 . Sementara jawaban lain tidak berfungsi di IE11 dalam kasus saya.

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

— Waqas Bukhary
sumber

0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

Luaskan cuplikan

— Levan Jintcharadze
sumber

0

Gunakan Kode Ini Dalam CSS:

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

— Balwinder Singh Sohi
sumber

0

Saya berakhir di sini karena saya mengalami masalah dengan sistem grid Bootstrap 4 dan loop Angular * ngFor. Saya memperbaikinya dengan menerapkan kelas justify-content-center col ke div yang mengimplementasikan ngFor:

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

yang memberikan hasil:

— Fletch
sumber

0

Dari doc (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

— Mohamed Allal
sumber