부트 스트랩 4의 수직 정렬 센터

Bootstrap 4를 사용하여 페이지 중간에 컨테이너를 가운데에 배치하려고합니다. 지금까지 실패했습니다. 도움을 주시면 감사하겠습니다.

Codepen.io 에서 빌드 했으므로 게임을하고 아이디어가 무엇인지 알 수 있습니다.

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

중대한! 수직 중심은 부모 의 높이 를 기준으로합니다.

당신이 센터하려는 요소의 부모가 더 정의한 경우 높이를 , 아무도 수직 중심의 솔루션은 작동하지 않습니다!

이제 Bootstrap 4의 수직 중심에 ...

새로운 flexbox & size 유틸리티 를 사용하여 container전체 높이 및를 만들 수 있습니다 display: flex. 이 옵션 에는 추가 CSS가 필요하지 않습니다 ( 컨테이너 의 높이 (예 :: html, body)가 100 % 여야 함을 제외하고 ).

align-self-centerFlexbox 하위의 옵션 1

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

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

align-items-centerflexbox 상위의 옵션 2 ( .rowis display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

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

justify-content-centerflexbox 상위의 옵션 3 ( .cardis display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

Bootstrap 4 Vertical Centering에 대한 추가 정보

Bootstrap 4는 flexbox 및 기타 유틸리티를 제공하므로 수직 정렬에 대한 많은 접근 방식이 있습니다. http://www.codeply.com/go/WG15ZWC4lf

1-자동 여백을 사용한 수직 중심 :

수직으로 가운데에 놓는 또 다른 방법은을 사용하는 것 my-auto입니다. 컨테이너 내부의 요소를 중앙에 배치합니다. 예를 들어 h-100행을 전체 높이로 만들고 열 my-auto을 세로로 가운데에 col-sm-12맞 춥니 다.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

자동 여백 데모를 사용한 수직 센터

my-auto 세로 y 축의 여백을 나타내며 다음과 같습니다.

margin-top: auto;
margin-bottom: auto;

2-Flexbox가있는 수직 중심 :

Bootstrap 4 .row가 이제 열에 수직으로 가운데에 display:flex놓기 만하면 align-self-center됩니다 ...

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

또는 align-items-center전체 .row를 사용 col-*하여 행의 모든 것을 세로로 가운데 정렬하십시오 ...

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

수직 중심 다른 높이 열 데모

이 Q / A를 중앙으로 보지만 동일한 높이를 유지하십시오.

3-디스플레이 유틸리티를 사용한 수직 중심 :

부트 스트랩 4 갖는 디스플레이 유틸 사용될 수 display:table, display:table-cell, display:inline, 등이이 함께 사용될 수있는 수직 배향 유틸 정렬 인라인으로, 인라인 블록 또는 테이블 셀 소자.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

디스플레이 유틸리티 데모를 사용한 수직 센터

더 많은 예 컨테이너의 세로 중심 .row에
있는 세로 중심 이미지 <div>부모의 세로 중앙에 있는 가운데 중심 및 아래쪽 세로 중심 전체 화면 점보트론

<div>

중대한! 나는 키를 언급 했습니까?

수직 중심은 부모 요소 의 높이를 기준으로합니다 . 대부분의 경우 전체 페이지를 중앙에 배치하려면 이것이 CSS 여야합니다.

body,html {
  height: 100%;
}

또는 사용 min-height: 100vh( min-vh-100부모 / 컨테이너에 부트 스트랩에서 4.1). 부모 내부에 자식 요소를 중앙에 배치하려는 경우. 부모는 정의 된 높이를 가져야합니다 .

참조 :
부트 스트랩 4의 수직 정렬
부트 스트랩 넷 센터 수직 및 수평 정렬

부모 컨테이너를 유연하게 만들고 다음을 추가하여 컨테이너를 세로로 정렬 할 수 있습니다 align-items:center.

body {
  display:flex;
  align-items:center;
}

업데이트 된 펜

부트 스트랩 4 클래스를 따르면이 문제를 해결하는 데 도움이되었습니다.

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

위의 어느 것도 나를 위해 일하지 않았으므로 다른 대답을 추가하고 있습니다.

목표 : 부트 스트랩 4 flexbox 클래스를 사용하여 페이지에서 div를 세로 및 가로로 정렬합니다.

1 단계 : 가장 바깥 쪽 div를 높이로 설정합니다 100vh. 이것은 높이를 Veiwport 높이의 100 %로 설정합니다. 이 작업을 수행하지 않으면 다른 작업이 수행되지 않습니다. 높이로 설정100% 부모로 설정하는 것은 부모를 기준으로 한 것이므로 부모가 뷰포트의 전체 높이가 아닌 경우 아무것도 작동하지 않습니다. 아래 예에서는 Body를 100vh로 설정했습니다.

2 단계 : 컨테이너 div를 d-flex클래스 가있는 flexbox 컨테이너로 설정하십시오 .

3 단계 : justify-content-center수업 과 수평으로 div를 중심에 둡니다 .

4 단계 : align-items-center

5 단계 : 페이지를 실행하고 세로 및 가로 가운데 div를 봅니다.

가운데 div 자체 (자식 div)에 설정해야 할 특수 클래스는 없습니다.

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

나는 모든 대답을 시도했지만 여기에 h-100 과 vh-100 의 차이점이 있음을 알았습니다. 여기 에 내 해결책이 있습니다.

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

Bootstrap 4 (베타)에서을 사용하십시오 align-middle. 수직 정렬에 대해서는 Bootstrap 4 설명서를 참조하십시오 .

수직 정렬 유틸리티를 사용하여 요소의 정렬을 변경하십시오 . 세로 정렬은 inline , inline-block , inline-table 및 table cell 요소 에만 영향을 미칩니다 .

선택 .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, 및 .align-text-top필요에 따라.

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

이 줄은 마법이 일어나는 곳이다 <div class="col-md-6 my-auto">는이 my-auto칼럼의 내용을 중심합니다. 이것은 위의 코드 샘플과 같이 다양한 크기의 이미지가있을 수 있으며 열의 텍스트를 오른쪽에 정렬 해야하는 상황에서 효과적입니다.

나는 Bootstrap으로 이런 식으로했다 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

수직 정렬이 부트 스트랩 4 클래스 사용 :

부모 : d- 테이블

과

자식 : d-table-cell & align-middle & text-center

예 :

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

부모님이 서클을 원한다면 :

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

다음과 같은 두 개의 사용자 정의 CSS 클래스가 있습니다.

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

최종 사용법은 다음과 같습니다.

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

콘텐츠를 100 % 높은 플렉스 박스 컨테이너 (예 : h-100)에 넣습니다. 그런 다음 justify -content-center 클래스를 사용하여 컨텐츠를 중앙에서 정당화하십시오 .

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

.my-autoyor div에서 (bootsrap4) CSS 클래스 사용

부트 스트랩 4.1.3에서 :

이것은 타이틀 container > row > column옆에 부트 스트랩 배지를 배치하려고 할 때 저에게 효과적이었습니다 h1.

일한 것은 간단한 CSS였습니다.

.my-valign-center {
  vertical-align: 50%;
}

또는

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>