CSS

.button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}

这使按钮（我想要的东西）居中并将它放在屏幕的底部，但位置是固定的，所以如果我向下滚动按钮也会下降。我也尝试将按钮的position设置为absolute，将div-1的position设置为relative，这也不起作用。

编辑： div的高度是可变的，因此边距可能不是一个好选择

Answer 1

只需按下按钮位置：绝对而不放置div relativ

.button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
  height:1000px;
  
}

<div class="test">
 <div>
    <div>
      <button class="button">
            test
      </button>
    </div>
  </div>
</div>

Answer 2

如果宽度div为50％，则必须为25％如果宽度div为70％，则必须为15％

.center{
  position:fixed;
  bottom:20px;
  left:20%;
  width:60%;
 
}

 .center .btn{
     background:red;
     width:100%;
     color:white;
     font-weight:bold;
     border-radius: 64px;
    padding:10px;
  }

<div class="center">
  <button class="btn">Login</button>
</div>

Answer 3

尝试使用VW而不是px。

HTML：

<button class="button">TEST</button>

CSS：

.button {
    position: fixed;
    bottom: 10px;
    left: 47vw;
    width: 6vw;
}

修改

HTML：

<div class="div">
<button class="button">TEST</button>
</div>

CSS：

.div{
   position: relative;
   border: 1px solid black;
   width: 500px;
   height: 250px;
}
.button {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 50px;
    margin-left: -25px;
}

我正在寻找代码而不是问题所以我忘记了真正的问题是添加 div 或屏幕底部的按钮。

父div必须是 position：relative; 和按钮 position：absolute;

Answer 4

我相信这些Stack Overflow帖子可能会对您有所帮助：

1）How do I get a div to float to the bottom of its container

2）HTML/CSS positioning float bottom

如果这没有帮助，请提供您的HTML代码。

Answer 5

当父元素的高度和宽度为100％（文档或页面）时，您应该在按钮上使用position：absolute。

<div class="div-1">
  <div class="div-2">
    <div class="div-3">
      <button>
      Just a button
      </button>
    </div>
  </div>
</div>

和css很少重置：

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.div-1 {
  position: relative;
  height: 100%;
  width: 100%;
}

.div-2, .div-3{
  width: inherit;
  height: inherit;
}

button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

这是JSfiddle

将按钮放在div或屏幕的底部

CSS

5 个答案: