即使与分辨率无关对齐，按钮也不居中

Question

我的网站上有一个按钮，我使用了与分辨率无关的对齐方式。我检查了两个具有不同分辨率的不同计算机屏幕，它看起来还不错，但是，一旦在更大的纵横比屏幕或移动/平板设备上打开它就会重新定位。在宽高比较大的屏幕上，按钮向左移动，在较小的设备上，它向右浮动。我不是 100% 确定可能出了什么问题。下面是我的 CSS 和 HTML 代码。

HTML：

<div class="Welcome">
    <h1>Welcome to Beauty Factory Bookings</h1>
    <a href="website_link"><button>Book Appointment</button></a>
</div>

CSS：

    body {
        background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
        background-size: cover;
        font-family: Montserrat;
        margin: 0;
        padding: 0;

    .Welcome {
        margin-top: 13%;
    }

    .Welcome h1 {
        text-align: center;
        font-family: Montserrat;
        font-size: 50px;
        text-transform: uppercase;
    }

    .Welcome button {
        height: 60px;
        width: 340px;
        background: #ff656c;
        border: 1px solid #e15960;
        color: #fff;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 17px;
        font-family: Montserrat;
        outline: none;
        cursor: pointer;
        text-align: center;
        margin-left: 33%;
        margin-top: 3%;
        border-radius: 5px;
    }

知道如何解决这个问题吗？

Answer 1

您将一个 html 元素居中，该元素具有 标准位置，并且是带有margin-left: auto 和margin-right: auto 的块元素。

将classes和ids的首字母小写是惯例。

Example

Answer 2

只是另一种方法：

我将您的按钮包裹在div 中，并使用text-align:center 将按钮居中 不要忘记在你的css中取出margin-left: 33%;

HTML

<div class="Welcome">
    <h1>Welcome to Beauty Factory Bookings</h1>
    <div class="center">
        <a href="website_link"><button>Book Appointment</button></a>
    </div>
</div>

CSS

 .Welcome {
   margin-top: 13%;
 }

 .Welcome h1 {
   text-align: center;
   font-family: Montserrat;
   font-size: 50px;
   text-transform: uppercase;
 }

 .center {
   text-align: center;
 }

 .Welcome button {
   height: 60px;
   width: 340px;
   background: #ff656c;
   border: 1px solid #e15960;
   color: #fff;
   font-weight: bold;
   text-transform: uppercase;
   font-size: 17px;
   font-family: Montserrat;
   outline: none;
   cursor: pointer;
   text-align: center;
   margin-top: 3%;
   border-radius: 5px;
 }

示例：http://codepen.io/anon/pen/EPyjXm

Answer 3

为a 标签创建一个新的 CSS 属性并将显示设置为 flex（占用 100% 的宽度；并将内容对齐到中心。

编辑

查看您的网站后， 有来自某处的 15px 的左边距。如果有可能，请摆脱它，否则只需将margin-left: 0 添加到.Welcome a {...}

.Welcome a {
  display: flex;
  /*set display mode of anchor to flex*/
  justify-content: center; /* Justify content center*/
  margin-left: 0; /* Add !important in case it is overwritten*/
}

---

.Welcome {
  margin-top: 13%;
}
.Welcome h1 {
  text-align: center;
  font-family: Montserrat;
  font-size: 50px;
  text-transform: uppercase;
}
.Welcome a {
  display: flex;
  /*set display mode of anchor to flex*/
  justify-content: center; /* Justify content center*/
}
.Welcome button {
  height: 60px;
  width: 340px;
  background: #ff656c;
  border: 1px solid #e15960;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 17px;
  font-family: Montserrat;
  outline: none;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
}

  <div class="Welcome">
    <h1>Welcome to Beauty Factory Bookings</h1>

      <a href="website_link">
        <button>Book Appointment</button>
      </a>

  </div>