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