文字の中央寄せがうまくいかない

「アクセスについて」の文字の中央寄せがうまくいきません。
理想は画像のようにしたいですが、なぜだか思っているより上に表示されてしまいます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!--Metaタグ-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
9     <!--Bootstrap CSS-->
10     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
11
12    <!--Fontawesome-->
13    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
14
15    <title>Document</title>
16</head>
17<body>
18    <div class="container">
19    <div class="col-md-6 map-box">
20        <img src="https://picsum.photos/800/300" alt="">
21        <div class="row mx-auto">
22            <div class="col-md-6 access-circle">
23                <a href="#" class="btn-circle-flat"><i class="fa fa-caret-right"></i>アクセスについて</a>
24            </div>
25            <div class="col-md-6 button-info">
26                <div href="#" class="btn-flat-simple1 mb-2">
27                    <i class="fa fa-caret-right"></i>フロアマップ
28                </div>
29                <div href="#" class="btn-flat-simple1">
30                    <i class="fa fa-caret-right"></i>院内施設一覧
31                </div>
32            </div>
33        </div>
34    </div>
35</div>
36
37
38<style>
39/* ユニバーサルセレクタでマージンとパディングを消去とborder-boxの設置 */
40*, *:before, *:after {
41-webkit-box-sizing: border-box;
42box-sizing: border-box;
43margin: 0;
44padding: 0;
45}
46
47body {
48    background-color:#FFF;
49    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','Yu Gothic','メイリオ', 'ＭＳ Ｐゴシック','MS PGothic';/*　フォントの優先順位 */
50    font-size:80%;
51}
52
53/*　サイズがデカい場合はスクロールで表示 */
54html {
55    overflow-y:scroll;
56}
57
58p,li,dt,dl {
59    line-height:1.6;
60}
61p {
62    margin:0 0 1em 0;
63    font-size: 14px;
64    font-weight: 500;
65}
66/* スマホ用のCSS */
67@media (max-width : 760px) {
68    p {
69        margin:0 0 1em 0;
70        font-size: 12px;
71        font-weight: 400;
72    }
73}
74li {
75    list-style-type:none;
76}
77img {
78    border:0;
79    padding: 0px !important;
80}
81address {
82    font-style:normal;
83}
84.clear {
85    clear:both;
86}
87a {
88 text-decoration: none;
89}
90a:hover {
91    opacity: 0.9;
92    cursor: pointer;
93}
94
95.container1 {
96    width: 960px;
97    max-width: 960px;
98    margin: auto;
99}
100/* タブレット用のCSS */
101@media (max-width : 760px) {
102    .container1 {
103        width: 760px;
104        max-width: 100%;
105        margin: auto;
106    }
107}
108
109/*　CSS From Here */
110.btn-flat-simple1 {
111    position: relative;
112    font-weight: 500;
113    padding: 1em 2.5em;
114    text-decoration: none;
115    background: #ff9f1a;
116    transition: .4s;
117    color: white;
118}
119  
120.btn-flat-simple1:hover {
121   opacity: 0.9;
122}
123
124.btn-circle-flat {
125    display: inline-block;
126    text-decoration: none;
127    background: #383838;
128    color: #FFF;
129    width: 110px;
130    height: 110px;
131    line-height: 10px;
132    border-radius: 50%;
133    text-align: center;
134    overflow: hidden;
135    transition: .4s;
136  }
137  
138  .btn-circle-flat:hover {
139    opacity: 0.9;
140  }
141
142.map-box {
143    position: relative;
144    font-size: 15px;
145}
146
147.access-circle {
148    display: flex;
149    justify-content: center;
150    align-items: center;
151    cursor: pointer;
152    position: absolute;
153    top: 18%;
154    left: 7%;
155}
156
157.button-info {
158    justify-content: center;
159    align-items: center;
160    cursor: pointer;
161    position: absolute;
162    top: 18%;
163    left: 44%;
164}
165</style>
166       <!--Bootstrap Js-->
167       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
168       <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
169        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
170</body>
171</html>
172

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

回答1件

ベストアンサー

flexで上下左右中央寄せすればいいでしょう。
flexは上下左右中央寄せしたい要素の親要素に設定します。

css
1.btn-circle-flat {
2    display: inline-flex;  /* 修正 */
3    justify-content: center; /* 追加 */
4    align-items: center; /* 追加 */
5    text-decoration: none;
6    background: #383838;
7    color: #FFF;
8    width: 110px;
9    height: 110px;
10    line-height: 10px;
11    border-radius: 50%;
12    text-align: center;
13    overflow: hidden;
14    transition: .4s;
15  }