やりたい事

ページの上下左右中央にボタン(リンク用)を表示させたい

作成したコード

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
    html,body {
        height:100%; 
    
    }
    .wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
    .box{
        height: 100px;
    }

    </style>
    <title>Top</title>
</head>

<body>
    <div class="wrap">
        <div class="box">
	        <a href="#" class="btn btn-primary btn-lg btn-block" role="button">hogehogefugafuga test1</a>
	        <a href="#" class="btn btn-info btn-lg btn-block" role="button">hogehogefugafuga test2</a>
	    </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

実行結果

http://playcode.io/sample_center_button?tabs=app.html&output

質問内容

ページの上下左右の中央にボタンを配置するページを作成しております。
初めはBootstrap4のvertical-alignを読んで、試行錯誤をしておりましたが、上手く配置が出来ず、一旦CSSを書いて自分の完成形イメージが表示されるようにしてみました。

今回皆様にお伺いしたいのは

質問①：そもそもBootstrap4が標準で用意しているコードで今回実現したいボタン配置が実現出来ないのか

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

回答1件

ベストアンサー

d-flexなども用意されているので、いかようにもできると思いますが一応。
CSSを自分で書いてもいいと思います。

HTML
1    <div class="position-absolute h-100 w-100 m-0 d-flex align-items-center justify-content-center">
2        <div>
3            <a href="#" class="btn btn-primary btn-lg btn-block" role="button">hogehogefugafuga test1</a>
4            <a href="#" class="btn btn-info btn-lg btn-block" role="button">hogehogefugafuga test2</a>
5        </div>
6    </div>

cf.
https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment

投稿2018/03/28 03:18

x_x

総合スコア13749

iarik

2018/03/30 02:16

x_xさん、ご連絡が遅くなってしまい申し訳ございませんでした。ご回答ありがとうございます。 bootstrap4からグリットの仕組みが変わってflexboxが取り入れられたんですね。記載頂いたd-flexをいろいろと調べ始めました。だんだんと、container、row、d-flexの考え方と使わけに悩み始めましたが、大変参考になりました。

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