web-dev-qa-db-ja.com

ブートストラップでコンテナを縦に中央揃えにする方法

私はcontainerの内側でjumbotron divを垂直方向に中央揃えにしてページの中央に設定する方法を探しています。

私はこのCSSを使ったので、.jumbotronは画面の高さと幅に合わせて調整する必要があります。

.jumbotron{
  heght:100%;
  width:100%;
}

.container divは1025pxの幅を持ち、ページの中央（垂直方向の中央）になければなりません。

.container{
  width:1025px;
}

.jumbotron .container {
  max-width: 100%;
}

私のHTMLはこんな感じです

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

そのため、このページでは、ジャンボトロンを画面の高さと幅に合わせ、コンテナをジャンボトロンの垂直方向の中央に配置します。どうやってそれを達成できますか？

htmlcsstwitter-bootstraptwitter-bootstrap-3vertical-alignment
280
user1012181

アップデート2018

Bootstrap 4 はflexboxを含むので、垂直方向のセンタリングの方法はずっと簡単で、 余分なCSSは必要ありません 。

d-flexとalign-items-centerユーティリティクラスを使うだけです。

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

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

57
Zim

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

ブートストラップ4：

子を水平方向に中央揃えにするには、bootstrap-4クラスを使用します。

justify-content-center

子を垂直方向に中央揃えにするには、bootstrap-4クラスを使用します。

 align-items-center

しかし、忘れずにd-flexclassを使用することを忘れないでください。これらはbootstrap-4ユーティリティクラスです。

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

注： このコードが機能しない場合は、必ずbootstrap-4ユーティリティを追加してください。

私はそれがこの質問に対する直接的な答えではないことを知っていますが、それは誰かを助けるかもしれません

25
user9299363

私の好きなテクニック：

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>

this Fiddle ！も参照してください。

8
John Slegers

IE、Firfox、およびChromeでテスト済み。

CSS：

    .parent-container {
        position: relative;
        height:100%;
        width: 100%;
    }

    .child-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

HTML：

    <div class="parent-container">
    <div class="child-container">
            <h2>Header Text</h2>
              <span>Some Text</span>
    </div>
    </div>

https://css-tricks.com/centering-css-complete-guide/にあります /

7
MartinPicker

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
David Martinez Esguerra

bootstrap4 いくつかの項目の垂直方向の中央

d-flex フレックスルール用

flex-column アイテムの垂直方向

両端揃え - content-center センタリング用

style = '高さ：300ピクセル;' は、中心が計算式である設定点に対しては h-100 classを使用する必要があります

それから水平中心のために 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>
0
Ramil Gilfanov