CSSで、画像とボタンを縦並びに中央揃えにしたい。

ピンク→タイトル画像(img/title.png)
青→ボタン(aタグ about me)

画像のようにタイトルロゴ画像とボタンを配置したいです。
タイトルロゴの配置はうまくいったのですが、ボタンが配置できません。

今現在のタグはこのような形です。

html
1  <!-- TOP ----------------------------------------->
2    <div class="section">
3      <div id="top">
4        <img src="img/title.png"><br>
5        <p>
6          <a href="#page8 " class="btn-circle-border-double">About&nbsp;Me
7          </a>
8        </p>
9      </div>
10  </div>

css
1/* TOP------------------------------------- */
2#top{
3width: 100vw;
4height: 100vh;
5background-image: url(img/top-min.png);
6background-size: cover;
7background-position: center;
8position: relative;
9}
10
11#top img{
12	position: absolute;
13	top: 50%;
14	left: 50%;
15	transform: translate(-50%,-50%);
16	max-width: 100%;
17	height: auto;
18}
19
20 #top p a{
21	  margin:0 auto;
22display:block;
23width:119px;
24 }
25
26/* トップボタン------------------------------------- */
27.btn-circle-border-double {
28  display: inline-block;
29  text-decoration: none;
30  color: #fff;
31  width: 120px;
32  height: 120px;
33  line-height: 120px;
34  border-radius: 50%;
35  border: double 4px #fff;
36  text-align: center;
37  overflow: hidden;
38  transition: .6s;
39}
40
41.btn-circle-border-double:hover {
42  -webkit-transform: rotateY(360deg);
43  transform: rotateY(360deg);
44}
45

ちなみにボタンにtransform: translate(-50%,-50%);を使う中央揃えをためしたのですが、
transformタグを入れると、なぜかボタンの動的なエフェクト（オンカーソルでくるくるするデザインになっています）が動作しなくなるので、あきらめました。

画像のように、タイトル画像を中央、その下にボタンを配置したいです。

初心者的な質問で申し訳ないのですが、よろしくお願いします。

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

回答2件

ベストアンサー

位置決めを position: absolute; で。
その場合、hover時の transform に translate(-50%,-50%) が必要です。

下記でどうでしょうか。

css
1/* トップボタン------------------------------------- */
2.btn-circle-border-double {
3  position: absolute;
4  top: calc(50% + 120px);
5  left: 50%;
6  transform: translate(-50%,-50%);
7  display: inline-block;
8  text-decoration: none;
9  color: #fff;
10  width: 120px;
11  height: 120px;
12  line-height: 120px;
13  border-radius: 50%;
14  border: double 4px #fff;
15  text-align: center;
16  overflow: hidden;
17  transition: .6s;
18  background-color: blue;
19}
20
21.btn-circle-border-double:hover {
22  -webkit-transform: translate(-50%,-50%) rotateY(360deg);
23  transform: translate(-50%,-50%) rotateY(360deg);
24}

CodePenサンプル

torakunさんの回答のように display: flex; で位置決めした方かシンプルになりますね。
その場合は、画像（#top img）の margin-top で画像か中央にくるように調整すればいいですね。

css
1#top img{
2  margin-top: 140px;
3  max-width: 100%;
4  height: auto;
5}

投稿2020/09/12 03:10

編集2020/09/12 03:42

hatena19

総合スコア33715

t01bi01

2020/09/16 11:59

解決いたしました。ありがとうございました。

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

このようなイメージでしょうか？

実行サンプル：https://jsfiddle.net/jdhrqfx5/

CSS
1/* 変更 */
2#top img{
3    /*
4    position: absolute;
5    top: 50%;
6    left: 50%;
7    transform: translate(-50%,-50%);
8    */
9    max-width: 100%;
10    height: auto;
11}
12
13/* 追加 */
14#top {
15    display: flex;
16    flex-direction: column;
17    justify-content: center;
18    align-items: center;
19}
20#top p a {
21    background: #4E7DD0;
22}