Bootstrap에서 컨테이너를 세로로 가운데에 배치하는 방법은 무엇입니까?


333

containerdiv 를 세로로 jumbotron가운데에 배치하고 페이지 중간에 div 를 설정 하는 방법을 찾고 있습니다.

.jumbotron화면의 전체 높이와 폭에 적응되어야한다. .containerDIV은의 폭을 갖는 1025px상기 페이지 (수직 중심)의 중앙이어야한다.

이 페이지에서 점보트론이 수직으로 중앙에있는 컨테이너와 함께 화면의 높이와 너비에 맞춰 점보트론을 갖기를 원합니다. 어떻게하면 되나요?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>



css-vertical-center.com 브라우저 호환성 정보를 몇 가지 해결책이 있습니다
EscapeNetscape

답변:


598

유연한 박스 방식

플렉시블 박스 레이아웃을 사용하여 수직 정렬 이 매우 간단 해졌습니다 . 현재이 방법은 Internet Explorer 8 및 9를 제외한 다양한 웹 브라우저 에서 지원됩니다. 따라서 일부 해킹 / 폴리 필 또는 IE8 / 9에 대해 다른 접근 방식 을 사용해야 합니다.

다음에서는 (이전 flexbox 구문에 관계없이) 3 줄 의 텍스트 로만 수행하는 방법을 보여줍니다 .

참고 :.jumbotron 수직 정렬을 달성하기 위해 변경 하는 대신 추가 클래스를 사용하는 것이 좋습니다 . 내가 사용하는 거라고 vertical-center예를 들어 클래스 이름입니다.

여기 예제 ( jsbin 의 미러 ) .

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

중요 사항 (데모에서 고려) :

  1. 백분율height또는 min-height속성은 height부모 요소 의 비율 값과 관련이 있으므로 height부모 값을 명시 적으로 지정해야합니다 .

  2. 공급 업체 접두사 / 이전 flexbox 구문은 간결성으로 인해 게시 된 스 니펫에서 생략되었지만 온라인 예에는 존재합니다.

  3. Firefox 9 (내가 테스트 한) 와 같은 일부 오래된 웹 브라우저 에서 플렉스 컨테이너 .vertical-center는이 경우 부모 내부에서 사용 가능한 공간을 차지하지 않으므로 다음 width과 같이 속성 을 지정해야합니다 width: 100%.

  4. 또한 위에서 언급 한 일부 웹 브라우저에서는 플렉스 항목 ( .container이 경우)이 가운데 중앙에 나타나지 않을 수 있습니다. 왼쪽 / 오른쪽 적용된 것 같다 marginauto플렉스 항목에 영향을주지 않습니다.
    따라서 우리는 그것을 정렬해야합니다 box-pack / justify-content.

열에 대한 자세한 내용 및 / 또는 세로 정렬에 대해서는 아래 주제를 참조하십시오.


레거시 웹 브라우저를위한 전통적인 방법

이것은 내가이 질문에 대답했을 때 쓴 오래된 대답입니다. 이 방법은 여기 에서 논의 되었으며 Internet Explorer 8 및 9에서도 작동합니다. 간단히 설명하겠습니다.

인라인 흐름에서 인라인 레벨 요소는 vertical-align: middle선언에 의해 가운데에 수직으로 정렬 될 수 있습니다 . W3C의 사양 :

중간
상자의 수직 중간 점을 부모 상자의 기준선에 부모의 x 높이의 절반에 더합니다.

이 경우 부모 .vertical-center요소가 명시 적으로 height있는 경우 우연히 height부모 와 동일한 자식 요소를 가질 수 있다면 부모 의 기준선을 전체의 중간 점으로 옮길 수 있습니다 -아이를 키우고 놀랍게도 원하는 유입 아이를- .container중심에 수직으로 정렬시킵니다.

모두 함께

즉, .vertical-centerby ::before또는 ::afterpseudo 요소 내에 전체 높이 요소를 만들고 해당 요소와 display다른 자식 의 기본 유형을 .containerto로 변경할 수도 있습니다 inline-block.

그런 다음 vertical-align: middle;인라인 요소를 세로로 정렬하는 데 사용 하십시오.

여기 있습니다 :

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>
.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

작업 데모 .

또한 매우 작은 화면에서 예기치 않은 문제가 발생하지 않도록 의사 요소의 높이를 재설정 auto하거나 필요한 경우 유형을 0변경할 수 있습니다.displaynone

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

업데이트 된 데모

그리고 하나 더:

컨테이너 주위 에 footer/ header섹션 이있는 경우 해당 요소를 올바르게 배치하고 ( relative, absolute? 사용자까지) 더 높은 z-index값을 추가하여 (보증을 위해) 항상 다른 요소 위에 유지하는 것이 좋습니다.



이것은 모든 잘 훌륭하지만 곧 추가로 display: flexA와 .container,이 아이가 원인 .row의 밖으로 플립. 플렉스 박스 방식으로 우리가 주요 부트 스트랩 기능 중 일부를 사용하지 않아도 될 것 같습니다.
Abraham Brookes

118

2019 업데이트

Bootstrap 4 에는 flexbox가 포함되어 있으므로 수직 센터링 방법이 훨씬 쉽고 추가 CSS가 필요하지 않습니다 .

d-flexand align-items-center유틸리티 클래스 만 사용하십시오 .

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

중요 : 수직 중심은 높이를 기준으로합니다 . 가운데에 놓으려는 항목의 부모 컨테이너에 정의 된 height있어야합니다 . 당신이 페이지의 높이를 원 하거나 부모님 을 원한다면 ! 예를 들면 다음과 같습니다.vh-100min-vh-100

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>


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


51

Bootstrap.css를 추가 한 다음 CSS에 추가하십시오.

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
}
Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>


3
html AND 본문 {높이 : 100 %; }는 열쇠입니다
xxxbence

28

에서 부트 스트랩 4 :

하기 수평 아이를 중심으로 , 사용 부트 스트랩-4 클래스 :

justify-content-center

아이를 세로가운데에 맞추려면 bootstrap-4 클래스를 사용하십시오.

 align-items-center

그러나 d-flex 클래스 를 사용하는 것을 잊지 마십시오 . 부트 스트랩 -4 유틸리티 클래스입니다.

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

참고 : 이 코드가 작동하지 않으면 부트 스트랩 -4 유틸리티를 추가하십시오

이 질문에 대한 직접적인 대답은 아니지만 누군가에게 도움이 될 수 있음을 알고 있습니다.


이것은 단지 Zim의 답변을 복사 한 것으로 보입니다.
TylerH

9

내가 선호하는 기술 :

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

데모

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

이 바이올린을 참조하십시오 !



0

대한 bootstrap4 몇 가지 항목의 수직 중심

플렉스 규칙에 대한 d-flex

품목의 수직 방향을위한 플렉스 컬럼

센터링을위한 정당화 컨텐츠 센터

style = 'height : 300px;' 중심이 계산 위치이거나 h-100 클래스를 사용하는 설정 점을 가져야합니다

그런 다음 수평 중심 div d-flex의 경우 내용 중심 및 일부 컨테이너

그래서 우리는 3 개의 태그에 대한 계층 구조를 가지고 있습니다 : div-column-> div-row-> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div> 

이것은 단지 Zim의 답변을 복사 한 것으로 보입니다.
TylerH

0

Bootstrap 4를 사용하는 경우 2 개의 div를 추가하면됩니다.

.jumbotron{
  height:100%;
  width:100%;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

d-table, d-table-cell, w-100, h-100 및 align-middle 클래스가 작업을 수행합니다.


0

컨테이너 클래스 제공

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

컨테이너 안에있는 div를 제공하십시오.

align-content: center;

이 div 내의 모든 내용이 페이지 중간에 나타납니다.


-3

여기에 부트 스트랩 3 행을 사용하여 내용을 수직으로 정렬하는 데 사용하는 방법이 있습니다. 높이가 같고 세로로 정렬 된 3 개의 기둥을 부트 스트랩합니다.

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

다음은 JSFiddle 데모입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.