JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap wrap1">
 <div class="inner inner1">
    <button class="btn btn1">btn</button>
  </div>
</div>

<div class="wrap wrap2">
 <div class="inner inner2"></div>
  <button class="btn btn2">btn</button>
</div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.wrap {
  border: 2px solid deeppink;
  margin-bottom: 30px;
}
.inner {
  width: 500px;
  height: 200px;
  margin: auto;
  border: 2px solid deepskyblue;
}
.btn {
  position: absolute;
}
.inner1 {
  position: relative;
}
.btn1 {
  left: 0;
  bottom: 0;
}

.wrap2 {
  position: relative;
}
.btn2 {
  left: calc(50% - 250px + 2px);
  bottom: 2px;
}