web-dev-qa-db-ja.com

ブートストラップレスポンシブページでdivの中心を合わせる方法

position a div at centre of a responsive page

以下のレイアウトのように、ページの中央にdivを配置して、ブートストラップを使用してレスポンシブページを作成する必要があります。

csscss3twitter-bootstrapresponsive-design
115
Rama Priya

ブートストラップ4の更新

フレックスボックス付きのシンプルな垂直グリッドアライメント

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}
<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

ブートストラップ3のソリューション

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

これは、すべての画面サイズを中心とした水平方向と垂直方向のdivの簡単な例です。

160
ppollono

CSS：

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML：

<div class="container">
  <div>
    example
  </div>
</div>

フィドルの例

33
vocasle

ブートストラップ4の

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

justify-content-center

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

 align-items-center

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

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

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

10
user9299363

ブートストラップ4用の更新

Bootstrap 4がflexboxになったので、垂直方向の配置が簡単になりました。フルハイトのflexbox divを考えると、上下の余白でさえmy-autoだけです...

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

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

ブートストラップ4の垂直方向の中央

9
Zim

表示テーブルとブートストラップなしで、私はむしろそれをしたい

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

3
Matoeil

CSSで何も変更する必要はありません。クラスでこれを直接記述すれば、結果が得られます。

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

enter image description here

1
jay

良い答えppollono。私はただ遊んでいた、そして私は少しより良い解決策を得た。 CSSは同じままです。

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

しかしHTMLの場合：

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

これで十分でしょう。

1
simranjazz

最善の方法ではありませんが、それでも動作します

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>
0
Tarun Rawat

ブートストラップでレイアウトを完成させる最も簡単な方法は、次のようになると思います。

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

divを中央に配置できるようにdivのレイヤーを追加するだけでしたが、パーセンテージを使用していないため、divの最大幅をcenterに指定する必要があります。

同じ方法で複数の列を中央揃えにすることができます。divレイヤを追加するだけで済みます。

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

注：md、sm、およびxsに12桁目のdivを追加します。これを行わないと、背景色の最初のdiv（この場合は "blueviolet"）が折りたたまれ、子のdivが表示されますただし、背景色は違います。

0
TheOneAndOnly ME

Bootstrap 4.3.1の実際のバージョンでは

スタイル

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

コード

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div
0
scysys