css 円2つを重ねて画面のサイズが変わってもレイアウトが崩れないようにしたい

前提・実現したいこと

円のボタンを2つ重ねたい
現在、ボタンを2つ重ねることを試みているのですが、
%やpx,vwで指定しても画面のサイズによって子要素の位置が変わってしまいます。
cssを使っているのですがなかなかうまくいかず…
どうやって固定すればよいでしょうか…？
完成イメージはこのような感じです。
赤いボタンはtext-centerで中央に固定しています。

発生している問題・エラーメッセージ

横幅の大きさによっ子要素の円が動いてしまう

該当のソースコード

html
1<div class="center-block relative">
2  <%= button_to "ボタン", {controller: 'hoge', action: 'hoge', user_id: @user.id},
3    {method: :post, class: "btn-circle-big-start", name: "hoge"} %>
4    <%= button_to "ボタン", {controller: 'hogehoge', action: 'hogehoge', user_id: @user.id},
5      {method: :patch, class: "btn-circle-small-break_start", name: "break_start"} %>
6  </div>

css
1//大きいボタン
2.btn-circle-big-start {
3  border: none;
4  display: inline-block;
5  text-decoration: none;
6  background: #f23a3a;
7  color: #FFF;
8  width: 250px;
9  height: 250px;
10  font-size: 60px;
11  font-weight: bolder;
12  line-height: 250px;
13  border-radius: 50%;
14  text-align: center;
15  overflow: hidden;
16  transition: .4s;
17 position: relative;
18}
19//大きいボタン押したときの色
20.btn-circle-big-start:hover {
21  background:   #F45E5E;
22}
23
24//小さいボタン
25.btn-circle-small-break_start {
26  border: none;
27  display: inline-block;
28  text-decoration: none;
29  background: #e3f3ac;
30  color: #000000;
31  width: 70px;
32  height: 70px;
33  font-size: 15px;
34  font-weight: bolder;
35  line-height: 70px;
36  border-radius: 50%;
37  text-align: center;
38  overflow: hidden;
39  transition: .4s;
40  position: absolute;
41//以下指定法が分かりません
42　top:;	
43　right:;	
44　bottom:;	
45　left:;	
46}
47//円同士の関連付け
48.center-block.relative {
49    position: relative;
50    text-align:center;
51}

試したこと

bootstrapのグリッドで何かできないかと試しましたができませんでした。

補足情報（FW/ツールのバージョンなど）

コードが足りなければ足します。
初心者で至らない点があると思いますがよろしくお願いします。

hatena19

2020/04/23 11:09

railsで作成しているのでしょうか。コンパイル後のHTMLを提示してもらえますか。

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

回答1件

ベストアンサー

下記のような感じでどうでしょうか。

css
1.btn-circle-small-break_start {
2  border: none;
3  display: inline-block;
4  text-decoration: none;
5  background: #e3f3ac;
6  color: #000000;
7  width: 70px;
8  height: 70px;
9  font-size: 15px;
10  font-weight: bolder;
11  line-height: 70px;
12  border-radius: 50%;
13  text-align: center;
14  overflow: hidden;
15  transition: .4s;
16  position: absolute;
17  left: calc(50% - 150px); /* 150pxは適宜調整 */
18  bottom: 0;               /* */
19}