Bootstrap 4 Trung tâm dọc và ngang

Tôi có một trang chỉ tồn tại biểu mẫu và tôi muốn biểu mẫu được đặt ở giữa màn hình.

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

Biểu justify-content-centermẫu căn chỉnh theo chiều ngang, nhưng tôi không thể tìm ra cách căn chỉnh nó theo chiều dọc. Tôi đã cố gắng sử dụng align-items-centervà align-self-center, nhưng nó không hoạt động.

Tôi đang thiếu gì?

BẢN GIỚI THIỆU

Cập nhật 2019 - Bootstrap 4.3.1

Có không cần cho thêm CSS . Những gì đã có trong Bootstrap sẽ hoạt động. Hãy chắc chắn rằng (các) thùng chứa của mẫu có chiều cao đầy đủ . Bootstrap 4 hiện có một h-100lớp cho chiều cao 100% ...

Trung tâm dọc:

<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

chiều cao của vật chứa với (các) vật phẩm đến trung tâm phải là 100% (hoặc bất cứ chiều cao nào bạn muốn có liên quan đến vật phẩm ở giữa)

Lưu ý: Khi sử dụng height:100%( phần trăm chiều cao ) trên bất kỳ phần tử nào, phần tử sẽ lấy chiều cao của phần chứa của nó . Trong các trình duyệt hiện đại, các đơn vị vh height:100vh;có thể được sử dụng thay vì %để có được chiều cao mong muốn.

Do đó, bạn có thể đặt html, body {height: 100%} hoặc sử dụng min-vh-100lớp mới trên container thay vì h-100.

Trung tâm ngang:

• text-centerđến display:inlinecác yếu tố trung tâm & nội dung cột
• mx-auto để định tâm bên trong các yếu tố flex
• offset-*hoặc mx-autocó thể được sử dụng để cột giữa ( .col-)
• justify-content-centervào cột giữa ( col-*) bên trongrow

Trung tâm căn chỉnh dọc trong Bootstrap 4
Bootstrap 4 ở giữa toàn màn hình ở giữa
Bootstrap 4 nhóm đầu vào trung tâm
Bootstrap 4 ngang + trung tâm toàn màn hình dọc

Công việc này đối với tôi:

<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 có thể giúp bạn. thông tin ở đây

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

Bạn cần một cái gì đó để tập trung vào hình thức của bạn vào. Nhưng vì bạn không chỉ định chiều cao cho html và nội dung của mình, nên nó sẽ chỉ bao bọc nội dung - chứ không phải khung nhìn. Nói cách khác, không có chỗ để đặt vật phẩm vào giữa.

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

Bootstrap có trung tâm văn bản để căn giữa một văn bản. Ví dụ

<div class="container text-center">

Bạn thay đổi như sau

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

theo sau

<div class="row text-center">

Không ai đã làm việc cho tôi. Nhưng anh ấy đã làm.

Vì lớp Bootstrap 4 .row hiện đang hiển thị: flex bạn chỉ cần sử dụng tiện ích flexbox tự căn chỉnh mới trên bất kỳ cột nào để căn giữa theo chiều dọc:

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

Tôi đã tìm hiểu về nó từ https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

Điều này đang hoạt động trong IE 11 với Bootstrap 4.3 . Trong khi các câu trả lời khác không hoạt động trong IE11 trong trường hợp của tôi.

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

Sử dụng mã này trong CSS:

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

Tôi đã kết thúc ở đây vì tôi gặp vấn đề với hệ thống lưới Bootstrap 4 và vòng lặp Angular * ngFor. Tôi đã sửa nó bằng cách áp dụng lớp col justify-content-centre cho div triển khai 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>

đưa ra kết quả:

Từ tài liệu (bootrap 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