ブートストラップで画面上で上下中央寄せしたい

お疲れ様です。
表題の通り、要素を画面上で上下中央寄せしたいです。

max-autoやfloat centerを試したのですが、画像のようになってしまいます。。。

html
1        <div class='container border border-secondary text-center d-flex align-items-center'>
2            <!--空行-->
3            <div class='row'>
4                <div class='col-md-12'>
5                    <p>
6                    </p>
7                </div>
8            </div>
9            <!--不正な画面遷移-->
10            <div class='row'>
11                <div class='col-md-12'>
12                    <p>不正な画面遷移が行われました。</p>
13                </div>
14            </div>
15            <!--空行-->
16            <div class='row'>
17                <div class='col-md-12'>
18                    <p>
19                    </p>
20                </div>
21            </div>
22        </div>

m.ts10806

2021/02/09 10:46 編集

Bootstrapのバージョンを正確に追記してください。あと、その空行、意味ありますか？

行動規範の内容に同意します

回答2件

素直にやるならこんな感じでしょうか。

html
1                <div class='d-flex align-items-center col-md-12 vh-100'>
2                    <p>不正な画面遷移が行われました。</p>
3                </div>

Relative to the viewport | Sizing - Bootstrap 4.2 - 日本語リファレンス
 アイテムの整列(Align items) | Flex - Bootstrap 4.2 - 日本語リファレンス

投稿2021/02/10 06:13

編集2021/02/10 06:45

Lhankor_Mhy

総合スコア36960

あくまで一案。

変に空行とか作っても「上下中央」なんて正確になるわけではないので、
「上下中央の機能がある」modalをトリガーなく表示状態で出してしまえば良いのでは。
modal#Vertically centered
※指定がなかったので5.0.0-beta1で確認

html
1<body class="modal-open">
2<div class="modal fade show" tabindex="-1" role="dialog" aria-modal="true" style="display: block;">
3  <div class="modal-dialog modal-dialog-centered">
4    <div class="modal-content">
5      <div class="modal-header">
6      <div class="modal-body text-center">
7        <p>不正な画面遷移が行われました。</p>
8      </div>
9    </div>
10  </div>
11</div>