Question

我需要帮助将我的按钮与屏幕的中间（水平和垂直）对齐。按钮位于图像上方。我知道这里有类似的问题，但是我尝试了所有的建议，似乎没有任何工作。我想这可能是因为我的按钮位于宽度和高度均为100％的图像上方，换句话说，图像是占据整个页面的全屏图像。

我的按钮位于屏幕的左上角。

＆＃13;

body {
    width:100%;
    height:100%;
    background-image: url("space.jpg");
}

.button {
    margin:auto;
    display:block;
}

＆＃13;

<div class="wrapper">
    <button class="button">Button</button>
</div>

<img src="space.jpg">

＆＃13;

Answer 1

更新

使用<div>创建 fixed dimensions并将背景添加到其中。
根据您的需要调整<div>的尺寸。
将您的按钮置于内<div>
将按钮放在<{1}} 中，并将其<div> - 与其父级相关联
使用position:absolute属性以及transform

top / left / right / bottom

/* relevant starts here CSS */

.mycontent {
  width: 100vw;
  max-width: 100%
}
.button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: #fff;
  font-size: 1.2em;
  border: 1px solid #777;
  padding: 0 .6em;
  color: #000;
  opacity: .6;
}
.button:hover {
  opacity: 1;
  cursor: pointer;
}
.topcontent {
  height: 100vh;
  width: 2560px;
  max-width: 100%;
  background: url(http://supersocl.com/wp-content/uploads/2016/09/2560X1440-Wallpaper-Elegant-6G0.jpg);
  background-size: cover;
}
.othercontent {
  background: #010101;
  padding: 20px 40px 20px 40px;
}

/* irrelevant starts here CSS */

body {
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
  color: #999;
}
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
p {
  margin: 0 auto;
  padding: 20px;
  text-align: justify;
  text-justify: inter-word;
}

Answer 2

您可以使用CSS3 flex-box 概念来实现这一目标。

绝对中心属性

设置父级（此处为包装器）：display:flex;
然后设置child（这是它的按钮）：margin:auto;

它将位于 绝对中心 。我已添加下面的代码段。

html,body {
  height:100%;
  width:100%;
}
.wrapper {
  display:flex;
  align-items:center; 
  width:100%;
  height:100%;
  background-image: url("https://i.stack.imgur.com/wwy2w.jpg");
  background-repeat:no-repeat;
  background-size:cover;
}

.button {
  width:100px;
  margin:auto;
}

<div class="wrapper">
    <button class="button">Button</button>
</div>

Answer 3

请将此代码添加到您的css：

button {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 50%;
}

img {
    width: 100%;
}

希望它对您有用

由于

Answer 4

试试这个：

.wrapper {
    width:100%;
    height:100vh;
    background-image: url("https://unsplash.it/800/400/");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    display:block;
}

.button {
    width:100px;
    position: absolute;
    bottom:50%;
    left:50%;
}

<div class="wrapper">
    <button class="button">Button</button>
</div>

Answer 5

试试这个：

body {
    width: 100%;
    height: 100%;
    position: relative;
}

img {
    width: 100%;
}

button{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #000;
    padding: 6px 12px;
    border: solid 1px #000;
    border-radius: 5px;
    color: #fff;
    min-width: 150px;
}

在全屏图像上对齐按钮

5 个答案: