html - 如何使按钮在页面上居中并响应？

Question

我试图做到这一点，以便我在屏幕上居中的按钮(当屏幕为全尺寸时，它居中)保持在中心，同时仍然缩小以适应较小的屏幕。

我已经尝试了一些我在此处和其他地方找到的关于更改 position: absolute; 并使用 text-align: center; 将按钮包装在 div 中的答案和 margin: auto; 但到目前为止，按钮最终没有保持居中。

这是我的:

    .wrapper {
    text-align: center;
    margin: auto;
  }

  #mybutton {
  position: absolute;
  left: 37%;
  text-align: center;
  cursor: pointer;
  bottom: 10%;
  letter-spacing: .55rem;
  max-width: 50%;
  background: #3498db;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 30px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border-color: #3498db;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

这可能是我所缺少的非常简单的东西，但是已经晚了，我已经厌倦了处理这个问题，所以如果有人可以提供任何帮助，我们将不胜感激!

Answer 1

让它变得简单。您只需要具有宽度的 text-align:center。

我用过的 CSS

width:50%;margin:0 auto;text-align:center;

参见 here