Twitter Bootstrap 3을 사용하고 있는데 JSFiddle 링크div 와 같이 세로로 두 개를 정렬하려고 할 때 문제가 있습니다 .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap의 그리드 시스템은 float: left이 아닌을 사용 display:inline-block하므로 속성 vertical-align이 작동하지 않습니다. 나는 margin-top그것을 고치기 위해 사용하려고 시도했지만 이것이 반응 형 디자인에 좋은 해결책이 아니라고 생각합니다.

이 답변은 해킹을 제시하지만 flexBox ( @Haschem answer에 명시된 바와 같이)를 사용하는 것이 좋습니다 . 이제 모든 곳에서 지원되기 때문입니다.

데모 링크 :
- 부트 스트랩 3
- 부트 스트랩 4 알파 (6)

필요할 때 여전히 커스텀 클래스를 사용할 수 있습니다.

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

전리품

를 사용하면 inline-block코드에서 실제 공간 (예 :)을 허용하면 블록 사이에 공간이 추가 ...</div> </div>...됩니다. 열 크기가 12에 추가되면이 추가 공간으로 인해 그리드가 끊어집니다.

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

여기 <div class="[...] col-lg-2">와 사이에 여분의 공백이 있습니다 <div class="[...] col-lg-10">(캐리지 리턴 및 2 개의 탭 / 8 공백). 그리고 ...

이 여분의 공간을 걷어차 자!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

통지 겉보기에 쓸모없는 의견을 <!-- ... -->? 그들은있는 중요한 - 그들없이, 사이의 공백 <div>요소는 그리드 시스템을 파괴, 레이아웃에 공간을 차지합니다.

참고 : Bootply가 업데이트되었습니다

유연한 박스 레이아웃

CSS Flexible Box 가 등장하면서 많은 웹 디자이너들의 악몽 ¹ 이 해결되었습니다. 가장 해킹 된 것 중 하나 인 수직 정렬. 이제는 알려지지 않은 높이 에서도 가능합니다 .

"수십 년의 레이아웃 해킹이 끝날 것입니다. 내일은 아니지만 곧 내일 남은 시간 동안 계속 될 것입니다."

- CSS 전설 에릭 마이어 의 W3Conf 2013

Flexible Box (또는 Flexbox)는 레이아웃 목적으로 특별히 설계된 새로운 레이아웃 시스템입니다. 사양 상태 :

플렉스 레이아웃은 표면적으로 블록 레이아웃과 유사합니다. 플로트 및 열과 같이 블록 레이아웃에 사용할 수있는 더 복잡한 텍스트 또는 문서 중심 속성이 많이 없습니다. 그 대가로 웹앱과 복잡한 웹 페이지가 자주 필요로하는 방식으로 공간을 분산하고 컨텐츠를 정렬 할 수있는 간단하고 강력한 도구를 얻게됩니다.

이 경우 어떻게 도울 수 있습니까? 음 .. 어디 한번 보자.

수직 정렬 열

Twitter 부트 스트랩을 사용하면 .row몇 가지 .col-*가 있습니다. 원하는 .row² 를 플렉스 컨테이너 상자 로 표시 한 다음 모든 플렉스 항목 (열)을 align-items속성 별로 세로 로 정렬하면 됩니다.

예를 들면 여기 (주의해서 주석을 읽으 십시오 )

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

출력

컬러 영역은 열의 패딩 상자를 표시합니다.

에 대한 설명 align-items: center

8.3 축 정렬 : align-items속성

플렉스 아이템 은 플렉스 컨테이너의 현재 라인의 횡축 에 유사 justify-content하지만 수직 방향으로 정렬 될 수있다 . align-items익명의 flex items를 포함하여 모든 flex 컨테이너의 항목에 대한 기본 정렬을 설정합니다 .

align-items: center; 중심 값을 기준으로 플렉스 항목 의 여백 상자는 선 내 교차 축의 중심에 있습니다.

큰 경고

중요 사항 # 1 : Twitter Bootstrap은 width열에 .col-xs-#클래스 중 하나를 제공하지 않으면 매우 작은 장치에서 열 수를 지정하지 않습니다 .

따라서이 특정 데모에서는 열을 명시 적으로 .col-xs-*지정하기 때문에 모바일 모드에서 열을 올바르게 표시하기 위해 클래스를 사용 했습니다 width.

그러나 다른 방법 당신은 할 수 오프 스위치 인 flexbox가 변경하여 단순히 레이아웃 display: flex;에 display: block;특정 화면 크기에. 예를 들어 :

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

또는 다음 과 같이 특정 화면 크기 에서만 지정할.vertical-align 수 있습니다.

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

이 경우 @KevinNelson 의 접근 방식을 사용 합니다.

중요 사항 # 2 : 공급 업체 접두사는 간결성을 위해 생략되었습니다. Flexbox 구문이 시간 동안 변경되었습니다. 새로운 서면 구문은 이전 버전의 웹 브라우저에서는 작동하지 않습니다 (그러나 Internet Explorer 9 이전 버전은 아닙니다! Flexbox는 Internet Explorer 10 이상에서 지원됩니다).

즉 display: -webkit-box, 프로덕션 모드 에서도 공급 업체 접두사 속성을 사용해야 합니다.

Demo 에서 "Toggle Compiled View" 를 클릭 하면 접두사가 붙은 CSS 선언 ( Autoprefixer 덕분에 )이 표시됩니다.

세로로 정렬 된 내용의 전체 높이 열

이전 데모 에서 볼 수 있듯이 열 (플렉스 항목)은 더 이상 컨테이너 (플렉스 컨테이너 상자, 즉 .row요소) 만큼 높지 않습니다 .

속성 center값을 사용하기 때문입니다 align-items. 기본값 stretch은 항목이 상위 요소의 전체 높이를 채울 수 있도록하는 것입니다.

이를 해결하기 위해 display: flex;열에도 추가 할 수 있습니다 .

예를 들어 (다시 의견을 명심)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

출력

컬러 영역은 열의 패딩 상자를 표시합니다.

마지막으로 여기서 데모 및 코드 스 니펫은 목표를 달성하기위한 현대적인 접근 방식을 제공하기 위해 다른 아이디어를 제공하기위한 것입니다. 실제 웹 사이트 나 응용 프로그램에서이 방법을 사용 하려면 " 큰 경고 "섹션을 염두에 두십시오 .

브라우저 지원을 포함한 추가 자료를 보려면 다음 자료가 유용합니다.

• 모질라 개발자 네트워크-유연한 박스
• Flexbox 가이드-CSS 트릭
• HTML5Rocks-Flexbox 빠른
• SmashingMagazine-Flexbox를 사용한 센터링 요소
• Philip Walton-Flexbox로 해결
• 사용 가능 : 플렉시블 박스 레이아웃 모듈

^{1. 반응 형 높이로 div 내부의 이미지를 세로로 정렬합니다 . 2. Twitter Bootstrap의 기본값을 변경하지 않기 위해 추가 클래스를 사용하는 것이 좋습니다 .row.}

아래 코드는 저에게 효과적이었습니다.

.vertical-align {
    display: flex;
    align-items: center;
}

2020 업데이트

원래 질문은 Bootstrap 3에 대한 것이지만 Bootstrap 4가 릴리스되었으므로 수직 중심에 대한 업데이트 된 지침이 있습니다.

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

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

부트 스트랩 4

Bootstrap 4는 기본적으로 flexbox이므로 세로 정렬에는 auto-margins , flexbox utils 또는 display utils 와 vertical align utils를 사용하는 여러 가지 방법이 있습니다. 처음에는 "수직 정렬 유틸리티"가 명백해 보이지만 인라인 및 테이블 표시 요소 에서만 작동합니다. 다음은 부트 스트랩 4 수직 센터링 옵션입니다.

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>

부트 스트랩 4-자동 여백 데모를 사용한 수직 센터

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>

부트 스트랩 4-수직 중심이 다른 높이 열 데모

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>

부트 스트랩 4-디스플레이 유틸리티를 사용한 수직 센터 데모

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

부트 스트랩 3

아이템의 컨테이너에 대한 Flexbox 방법 :

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

TranslateY 방법 변환 :

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

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

인라인 방법 표시 :

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Bootstrap 3 중심화 방법 데모

div의 CSS에서 이것을 시도하십시오 :

display: table-cell;
vertical-align: middle;

@media 쿼리에 익숙하지 않은 다른 사람에게 도움이 될 수 있도록 "솔루션"을 공유한다고 생각했습니다.

@HashemQolami의 답변 덕분에 col- * 클래스와 같이 모바일에서 작동하는 미디어 쿼리를 작성하여 col- *를 모바일에 쌓을 수 있지만 더 큰 화면의 경우 가운데에 세로로 정렬하여 표시 할 수 있습니다.

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

화면 해상도 당 다른 열 수를 요구하는보다 복잡한 레이아웃 (예 : -xs의 경우 2 행, -sm의 경우 3, -md의 경우 4 등)은 좀 더 고급 파이널 링이 필요하지만 -xs가있는 간단한 페이지의 경우 쌓여 있고 -sm이며 행이 더 크면 잘 작동합니다.

승인 된 답변에 따라 마크 업을 사용자 정의하지 않으려는 경우, 우려를 분리하거나 단순히 CMS를 사용하기 때문에 다음 솔루션이 제대로 작동합니다.

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

여기서 공백은 공백을 제거하기 위해 행이 글꼴 크기를 0으로 설정하기 때문에 부모 요소에서 글꼴 크기를 상속 할 수 없다는 제한이 있습니다.

David Walsh Vertical Center CSS에 따라이 방법을 선호합니다 .

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

는 transform필수적인 것은 아니다; 센터를 조금 더 정확하게 찾습니다. 인터넷 익스플로러 8은 약간 덜 결과로 중심이 될 수 있지만, 여전히 나쁘지 않다 - 수 있습니까 사용 - 변환 2 차원 .

이것이 나의 해결책이다. 이 클래스를 CSS 컨텐츠에 추가하십시오.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

그런 다음 HTML은 다음과 같습니다.

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

방금이 작업을 수행했으며 원하는 작업을 수행합니다.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

이제 내 페이지는

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

다음 코드는 현재 선택된 답변 이외의 다른 브라우저가 아닌 Chrome을 사용하여 작동합니다.

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply 링크

필요에 따라 높이를 수정하고 (구체적으로 .v-center) div를 제거 / 변경 div[class*='col-']해야 할 수도 있습니다.

나는이 같은 문제에 부딪쳤다. 필자의 경우 외부 컨테이너의 높이를 알지 못했지만 이것이 고정 된 방법입니다.

먼저 요소 html와 body요소 의 높이를 100 %로 설정하십시오. 이것은 중요합니다! 이것이 없으면 htmland body요소는 단순히 자녀의 키를 상속받습니다.

html, body {
   height: 100%;
}

그런 다음 외부 컨테이너 클래스를 사용했습니다.

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

마지막으로 클래스가있는 내부 컨테이너 :

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

HTML은 다음과 같이 간단합니다.

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

이것이 내용을 수직으로 정렬하는 데 필요한 전부입니다. 바이올린으로 확인하십시오.

JS 피들

테이블 및 테이블 셀이 필요하지 않습니다. 변환을 사용하여 쉽게 달성 할 수 있습니다.

예 : http://codepen.io/arvind/pen/QNbwyM

암호:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

Less 버전의 Bootstrap을 사용하고 CSS로 직접 컴파일하는 경우 일부 유틸리티 클래스를 사용하여 Bootstrap 클래스와 함께 사용할 수 있습니다.

Bootstrap 그리드 시스템의 응답 성과 구성 가능성을 유지하려는 곳에서 환상적으로 잘 작동하는 것으로 나타났습니다 ( -md또는-sm ) 하지만 주어진 행의 모든 ​​열이 동일한 세로 높이를 갖기를 원합니다. 그런 다음 내용을 세로로 정렬하고 행의 모든 ​​열이 공통 중간을 공유하도록하십시오).

CSS /리스 :

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML :

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

다른 화면 크기에서 다른 열 크기를 혼합 할 때 더 쉽게 사용할 수 있도록 zessx의 답변 에 대해 조금 자세히 설명했습니다 .

Sass 를 사용하는 경우 이를 scss 파일에 추가 할 수 있습니다.

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

다음 CSS를 생성합니다 (Sass를 사용하지 않는 경우 스타일 시트에서 직접 사용할 수 있음).

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

이제 다음과 같이 반응 형 열에서 사용할 수 있습니다.

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

플렉스 행동은 기본적으로 부트 스트랩 4. 추가부터 지원 d-flex align-items-center에서 rowDIV. 더 이상 CSS 내용을 수정할 필요가 없습니다.

간단한 예 : http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

귀하의 예 : http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

출처 : Flex · 부트 스트랩

자, 우연히 몇 가지 솔루션을 혼합했으며 마침내 레이아웃에 대해 작동하여 가장 작은 해상도에서 부트 스트랩 열이있는 3x3 테이블을 만들려고했습니다.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>

이 시도,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

이를 수행 할 수있는 몇 가지 방법이 있습니다.

1. 사용하다 

   display: table-cell;
   vertical-align: middle;

   컨테이너의 CSS

   display: table;

2. 화면 크기와 관련하여 여백을 변경하려면 미디어 화면과 함께 여백을 사용하십시오. 자세한 내용은 Google @ 미디어 화면을 참조하십시오.

3. 상대 패딩 사용

   즉, %로 패딩을 지정하십시오.

Bootstrap 4 (현재 알파)를 사용하면 .align-items-center클래스를 사용할 수 있습니다 . 따라서 Bootstrap의 반응 형 특성을 유지할 수 있습니다. 나를 위해 곧바로 잘 작동합니다. 부트 스트랩 4 설명서를 참조하십시오 .

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

나는 몇 가지 div 요소를 세로로 정렬하려는 동일한 상황에 부딪 쳤고 부트 스트랩 클래스 col-xx-xx가 float : left로 div에 스타일을 적용한다는 것을 알았습니다.

style = "Float : none"과 같은 div 요소에 스타일을 적용해야했고 모든 div 요소가 세로로 정렬되기 시작했습니다. 작업 예는 다음과 같습니다.

<div class="col-lg-4" style="float:none;">

JsFiddle 링크

누군가가 float 속성에 대한 자세한 내용을 읽으려는 경우를 대비하여 :

W3 학교-플로트