Html 按钮赢了'；不要停留在背景图像上

我试图在这个网站上研究这个问题，但一切都与我的特定网站无关。我的主页上几乎有一个背景图像，背景是“固定的”和“覆盖的”。我不确定这是否是它不起作用的原因。我想把“视图工作”按钮放在电脑中央。请帮忙

HTML:

为了直观地看到错误，您可能需要进入全屏模式（）或缩小屏幕，以便可以看到它滚动

---

谢谢。

不要像以前那样使用

margin

来“居中”元素

您可以添加此代码，

按钮将水平和垂直居中，而无需调整旧代码：

.butt {
  margin: 0; /* reset your old margin */
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

检查并添加所需的任何额外前缀（
-ms
用于ie9）。
谢谢。即使我调整了窗口的大小，如何使按钮保持在原位？现在，它在移动，我希望它保持不动。例如，squarespace在背景图像上有一个居中按钮，即使我更改了大小（或拖动了窗口的侧面），该按钮仍保持不变。@KasiaAriele您是否在代码中加入了我上面包含的样式规则？这应该使按钮在所有浏览器调整大小时居中，它是居中的。我想我还不够清楚。我希望它相对于我的背景图像居中。就像电脑屏幕的中心一样。我唯一的解决方案是媒体查询，还是将位置从固定改为滚动？@KasiaAriele-he上述css规则使按钮相对于浏览器窗口居中；因此，无论您如何调整浏览器的大小，它都将始终垂直和水平居中。如果所说的
计算机屏幕
是指
背景图像中的屏幕
，则必须确保背景图像也居中（
背景位置：居中；
）；如果按钮不喜欢这样，那么调整你的
bg图像
，使屏幕始终居中-你可以使用
@media
规则将按钮与
屏幕
对齐，但你永远不会拥有完美的100%时间哦，好的，明白了。如果我将
背景图像
更改为
滚动
，是否会更容易使我的按钮适应图像？或者我应该在html中创建一个Div，使背景
相对
和按钮
绝对
。
  @charset "UTF-8";
body {
  background-image: url(http://i66.tinypic.com/ww1d7n.png);
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  font-family: "Helvetica Neue";
}

#sidebar {
  background: #05E2D4;
  background-color: rgba(5, 226, 212, 0.7);
  width: 220px;
  height: 100%;
  display: block;
  position: absolute;
  left: -200px;
  top: 0px;
  transition: left 0.3s linear;
}

#sidebar.visible {
  left: 0px;
  transition: left 0.3s linear;
}

ul.sb {
  margin: 0px;
  padding: 0px;
}

ul li {
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 200px;
  display: block;
  width: 180px;
  padding: 30px;
  text-transform: uppercase;
  font-weight: 105;
  letter-spacing: 2.5px;
  line-height: 30%;
  margin-left: 20px;
}

#sidebar-btn {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 15px;
  position: absolute;
  margin: 20px;
  top: 0px;
  right: -60px;
  cursor: pointer;
}

#sidebar-btn span {
  height: 2px;
  background: #000000;
  margin-bottom: 5px;
  display: block;
}

a {
  text-decoration: none;
}

a:link {
  color: #FFFFFF;
}

a:visited {
  color: none;
}

a:hover {
  color: #ffcd03;
}

a:active {
  color: #ffcd03;
}

#logo {
  margin: 20px 50px 20px 50px;
}

#page {
  max-width: 800px;
  min-width: 600px;
}

#Kasiaport {
  width: 500px;
  margin: 50px 200px 50px 200px;
}

aside {
  width: 30%;
  background-color: white;
  padding: 40px 40px 20px 40px;
  margin: auto;
}

p.work {
  color: white;
  font-size: 9px;
  text-transform: uppercase;
  border-style: solid;
  border-color: white;
  margin-left: auto;
  margin-right: auto;
  width: 70px;
  padding: 15px 30px 15px 30px;
  display: block;
}

.butt {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  background-color: transparent;
  border-radius: 2px;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  border: solid #FFFFFF 2px;
  text-decoration: none;
  font-weight: 200;
  letter-spacing: 1.5px;
  font-family: "Helvetica Neue";
  text-align: center;
  margin-left: 45%;
  margin-top: 32%;
  position: absolute;
}

.butt:hover {
  border-color: #ffcd03;
  background-color: none;
  color: #ffcd03;
  text-decoration: none;
}

.butt {
  margin: 0; /* reset your old margin */
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}