absoluteのタグを中央寄せにできない

Question

absoluteの値がついているlabelを中央に表示させたいです。
absoluteのものを中央よせする方法を調べたら下記の記事が出てきたのでやってみたのですがlabelが横幅いっぱいに伸びてしまします。
どうしたらいいでしょうか？

実装コード

参考にしたサイト
https://onishi-noboru.com/how-to-center-elements-using-position-absolute

Answer 1

下記でどうでしょう。

label {
  background: gray;
  padding: 40px;
  position: absolute;
  border-radius: 50px;
  margin: auto;
  left:0;
  right:0;
  width: 0; //幅を設定しないと拡張してしまう。
// 上下中央寄せもしたいのなら下記追加
//  top: 0;
//  bottom:0;
//  height: 0;
}
input {
  &.file {
    padding: 40px;
    border-radius: 50px;
    display: none;
    height: 100%;
  }
}

div {
  &.box {
//    position:"relative";
//    width: "100%";
// "" で囲んではダメ
    position: relative; 
    width: 100%;
    background: blue;
    height: 100px;
  }
}