如何在响应式 css 按钮中对齐文本中心？

Question

我有一个图像，里面有两个按钮。我希望这些按钮具有响应性，并且文本始终居中并在图像调整大小时调整大小。这些按钮内的文本未居中，并且在调整浏览器大小或在移动设备上浏览时变得更糟。我错过了什么？下面是图片和按钮的 CSS 代码：

.container {
  position: relative;
  width: 100%;
  max-width: 2400px;
}

.container img {
  width: 150%;
  opacity: 0.85;
  height: auto;
}

.container .btn {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 70%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

.container .btns {
  width: 30%;
  height: 10%;
  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 30%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 2vw;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

<div class="container">
  <img img="" src="" alt="">
  <a href="" class="btn">Registracija Kaune</a>
  <a href="" class="btns">Registracija Vilniuje</a>
</div>

下面是它的外观图片：

这是它在桌面上的外观：

这是它在移动/调整大小的浏览器上的外观：

Answer 1

我去掉了按钮上的宽度和高度，并将填充更改为 %，以便它具有响应性，并且在调整大小时文本将始终居中显示。

.container {
  position: relative;
  width: 100%;
  max-width: 2400px;
}

.container img {
  width: 150%;
  opacity: 0.85;
  height: auto;
}

.container .btn {

  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 70%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 1.5vw;
  padding: 1% 5%;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

.container .btns {

  opacity: 0.8;
  filter: alpha(opacity=80);
  position: absolute;
  top: 80%;
  left: 30%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 2vw;
  padding: 1% 5%;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  line-height: 100%;
}

<div class="container">
  <img img="" src="" alt="">
  <a href="" class="btn">Registracija Kaune</a>
  <a href="" class="btns">Registracija Vilniuje</a>
</div>