부트 스트랩 4 센터 수직 및 수평 정렬

양식 만 존재하는 페이지가 있고 화면 중앙에 양식을 배치하고 싶습니다.

<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-center양식은 가로로 정렬되지만 세로로 정렬하는 방법을 알 수 없습니다. align-items-center및 을 사용하려고 시도했지만 align-self-center작동하지 않습니다.

내가 무엇을 놓치고 있습니까?

데모

2019 업데이트 - 부트 스트랩 4.3.1

없어 필요 에 대한 별도의 CSS는 . Bootstrap에 이미 포함 된 기능이 작동합니다. 양식의 컨테이너가 전체 높이 인지 확인하십시오 . 부트 스트랩 4는 이제 h-100100 % 높이 의 클래스를 가지고 있습니다 ...

수직 중심 :

<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

품목을 중심으로하는 용기의 높이는 100 % 여야합니다 (또는 원하는 높이가 중심 품목에 비례하여)

참고 : 요소에 height:100%( 백분율 높이 )를 사용하면 요소 의 높이가 컨테이너의 높이로 사용됩니다 . 최신 브라우저에서는 원하는 높이를 얻는 height:100vh;대신 vh 단위를 사용할 수 있습니다 %.

따라서 html, body {height : 100 %}를 설정하거나 min-vh-100대신 컨테이너 에서 새 클래스를 사용할 수 있습니다 h-100.

수평 중심 :

• text-centerdisplay:inline요소 및 열 내용 을 중앙에 배치
• mx-auto 플렉스 요소 내부를 중심으로
• offset-*또는 열mx-auto 을 중앙에 배치 하는 데 사용할 수 있습니다 ( .col-)
• justify-content-center내부 열 ( col-*) 을 중심으로row

부트 스트랩 4의 수직 정렬 센터 부트
스트랩 4 전체 화면 중심 형태
부트 스트랩 4 센터 입력 그룹
부트 스트랩 4 수평 + 수직 센터 전체 화면

이것은 나를 위해 작동합니다 :

<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가 도움이 될 수 있습니다. 여기에 정보

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

양식을 중앙에 배치 할 무언가가 필요합니다. 그러나 HTML과 본문의 높이를 지정하지 않았기 때문에 뷰포트가 아닌 내용을 래핑합니다. 다시 말해, 항목을 중앙에 배치 할 공간이 없었습니다.

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

부트 스트랩은 텍스트를 중앙에 배치하는 텍스트 중심을 가지고 있습니다. 예를 들어

<div class="container text-center">

당신은 다음을 변경

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

다음에

<div class="row text-center">

아무도 나를 위해 일하지 않았다. 그러나 그의 일이었다.

Bootstrap 4 .row 클래스가 이제 display : flex이므로 열에 수직으로 가운데에 정렬하려면 새로운 열 중심의 flexbox 유틸리티를 사용하면됩니다.

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

https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff 에서 배웠습니다.

이것은 IE 11 에서 Bootstrap 4.3 과 함께 작동 합니다. 내 경우에는 IE11에서 다른 답변이 작동하지 않았습니다.

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

CSS에서이 코드를 사용하십시오 :

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

Bootstrap 4 그리드 시스템과 Angular * ngFor 루프에 문제가 있었기 때문에 여기에서 끝났습니다. ngFor를 구현하는 div에 col justify-content-center 클래스를 적용하여 문제를 해결했습니다.

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

결과가 나타납니다.

문서에서 (부 트랩 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