Question

我开始学习CSS，试图将div置于屏幕底部。结果应如下所示：。这是我的代码

<div class="banner_wrapper">
<div class="banner ">some text</div>
</div>

和CSS

  .banner_wrapper {
     text-align: center;
}
  .banner{
    position: absolute;
    width:70%;
    display: block;
    position:fixed;
    bottom:0px;
    background: rgba(215, 40, 40, 0.9);
    z-index: 100;
}

Answer 1

定位到绝对位置，然后使用transform:translate(-50%, -50%)将div转换到页面的中心；并让bottom：0;

.banner_wrapper
{          
          position: absolute;
          left: 50%;
          bottom: 0px;
          transform: translate(-50%, -50%);
          margin: 0 auto;
          background-color:red;
          width:60%;
          height:50px;
          text-align:center;

}

.banner_wrapper
{
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  background-color:red;
  width:60%;
  height:50px;
  text-align:center;
}
.banner
{
  color:white;
  font-size:40px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="banner_wrapper">
<div class="banner ">some text</div>
</div>
</body>
</html>

Answer 2

不更改任何内容，这应该是最好的方法：

.banner{
    position: absolute;
    width:70%;
    display: block;
    position:fixed;
    bottom:0px;
    background: rgba(215, 40, 40, 0.9);
    z-index: 100;
    /* I've just added this last line */
    left: 15%;
}

这将起作用，因为它与左侧的距离为15％，然后该块的大小将为容器的70％，然后在右侧将剩下15％，这意味着您已经您的区块对齐了。

Answer 3

  .banner{
    position: absolute;
    width:70%;
    display: block;
    position:fixed;
    left: 0;
    right:0;
    margin: 0 auto;
    bottom:30px;
    background: rgba(215, 40, 40, 0.9);
    z-index: 100;
}

<div class="banner_wrapper">
<div class="banner ">some text</div>
</div>

您应该添加此内容：

left:0px
right: 0px
margin: 0 auto;

并更改底值

bottom: 30px;

Answer 4

我不知道这是否正是您要寻找的东西，但是我得到的是：

我使用位置静态而非绝对位置，因为我认为它与“横幅”元素更相关

.bruce_banner {
  position:fixed;
  bottom: 20px;
  width:60vw;
  height:50px;
  left:calc(50% - 30vw);
  border:1px solid black;
  background: #fff;
}

.mainContent {
  width:300px;
  margin:0 auto;
}

<div class="mainContent">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias accusamus, inventore aliquam in asperiores culpa libero recusandae, laboriosam ipsam illum non ipsum deserunt sequi nam nobis doloribus repellat quam quidem.</p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates impedit nostrum, magnam quibusdam deleniti aperiam in soluta placeat dolor pariatur deserunt aspernatur vero voluptatibus id suscipit possimus delectus aut neque!
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla sapiente iusto ut vitae ullam accusamus provident debitis libero, tenetur quaerat molestias quidem doloremque beatae sunt saepe dolores soluta. Quia, soluta!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus ad minima maxime porro tenetur! Perspiciatis corrupti accusantium molestiae in! Eligendi ipsam minima aliquid laboriosam blanditiis recusandae sapiente, nobis officia ad.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium reprehenderit voluptates incidunt culpa? Dolore voluptatum ut possimus, fugit explicabo tenetur aperiam. Adipisci inventore quisquam architecto, fuga blanditiis voluptate labore minima?
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In atque doloremque, asperiores est nam vitae at labore ipsam perspiciatis ullam temporibus exercitationem dolorem inventore tenetur, saepe omnis alias quod distinctio!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis delectus nihil aliquam tempora fugit nam ea, temporibus quos deleniti libero explicabo quas neque exercitationem! Temporibus cum et hic porro deleniti?</p>
</div>

<div class="bruce_banner">
    <p style="text-align:center;">Banner, smash !</p>
</div>

使用CSS将横幅广告放在屏幕底部居中

4 个答案: