bootstrap4 におけるfixed-xxx にて要素をセンタリングする

Question

bootstrap4 には、fixed-top（bottom） というクラスにより、スクロールの影響を受けない固定クラスがあります。
このクラスを利用し、画面の上or下にボタンを表示したいのですが、コレをセンタリングできる方法がないか模索中です。

mx-autoを利用しセンタリング使用としたのですが、positon:fixed がかかるり
left:0 であれば左に、right:0であれば右に行くのですが、両者がかかってセンタリングになる想定がそうとはならないようです。

ボタンをwidth:100%のブロック要素で囲いセンタリングすることはできるのですが、ここで問題なのが
ボタンの下の赤い要素は、canvasのお絵かき部分なので、width:100%のブロック要素部分が邪魔してcanvasへの書き込みの
じゃまになってしまいます。

なにか良い方策は無いでしょうか？
ご教授お願いいたします

コード

#wrapper{
  background-color:green;
  width:100%;
  z-index:0;
}
#front{
  background-color:brown;
  height:900px;
  z-index:1000;
  width:80%;
}

模索１

<button id="dragScroller" draggable="true" class="fixed-top mx-auto btn btn-link">
  <span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-arrows-alt fa-stack-1x fa-inverse"></i>
  </span>
</button>
<canvas id="front" class="mx-auto">手書きエリア</canvas>

センタリングできない

模索2

<div id="wrapper" class="mx-auto fixed-top text-center">
<button id="dragScroller" draggable="true" class="btn btn-link">
  <span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-arrows-alt fa-stack-1x fa-inverse"></i>
  </span>
</button>
</div>
<canvas id="front" class="mx-auto">手書きエリア</canvas>

キャンバス要素（赤）を覆ってしまう

Answer 1

canvasに全く重ねないならば

body {
  padding-top: buttonの高さ;
}

重ねるならば

<button class="fixed-top">btn</button>

button {
      left: calc(50% - 要素の半分);
    }

もしくは

<div class="fixed-top">
      <button class="">btn</button>
</div>

div {
      text-align: center;
    }

これらのどれかでどうですか？

Comments

[ssmxgo]

ありがとうございました！
感謝