Question

我有2个容器：我想将第一个容器放在顶部并居中（使用margin:0 auto;这样做没问题）。

但是，我无法将第二个放在底部中心。

我正在尝试将div对准底部位置的中心（例如页脚div，但宽度不为100％）。我的div的宽度为90％，无法居中。它始终向左对齐。如果我使用margin: 0 auto;，它将转到中心，而不是页面底部。如果我使用position: absolute; bottom:0;，它将进入页面底部，但未与中心对齐。

有人有解释吗？

PS：我想保持HTML不变，而不创建另一个div来包含第二个div。

.a {
  width: 90%;
  height: 10%;
  background-color: beige;
  margin: 0 auto;
}

.b {
  position: fixed;
  width: 90%;
  height: 10%;
  margin: 0 auto;
  bottom: 0;
  background-color: aliceblue;
}

<div class="a">A</div>
<div class="b">B</div>

Answer 1

因此，通过position: fixed，您已经有效地从DOM流中分离了该元素，因此margin: 0 auto现在已经不相关了，相反，您将需要执行其他几种选择之一来实现您的目标。几个示例（注意：代码段编辑器也无法很好地完成position: fixed，因此您需要在本地尝试）；

.a {
    width: 90%;
    height: 10%;
    background-color: beige;
    margin: 0 auto;
}
.b {
    position: fixed;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 10%;    
    background-color: aliceblue;
}

<div class="a">A</div>   
<div class="b">B</div>

OR

.a {
    width: 90%;
    height: 10%;
    background-color: beige;
    margin: 0 auto;
}

.b-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    
}

.b {
    margin: 0 auto;
    width: 90%;
    height: 10%;
    background-color: aliceblue;
}

<div class="a">A</div>

<div class="b-container">
  <div class="b">B</div>
</div>

希望这会有所帮助，欢呼起来。

Answer 2

我的信誉不高，无法评论答案，但是您可以使用

left: 0; right: 0;

在您的.b div上，而不必在其周围放置一个容器。我已经尝试过了，并且正在使用Chrome浏览器。

这里还有更多解释-CSS Fixed position with Auto Margin

Answer 3

给予.b以下信息：

left: 5%;

margin: auto不适用于绝对定位的元素，只能用于静态元素。

Answer 4

是否需要页眉和页脚？页脚总是在底部吗？使用更现代的flex布局来执行此操作。

https://stackblitz.com/edit/html-header-main-footer?embed=1&file=style.css

<body>
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</body>

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

body {
  display: flex;
  align-items: center;
  flex-direction: column;
}

header, main, footer {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

main {
  flex: 1;
}

问：如何运作？
答：主要是挠性垫片。

PS：页眉，主要和页脚仅是一个建议。您也可以只使用div。

Answer 5

@chris .....解决方案A无效，BI希望保持不变html @utkanos ..... left：5％很好，但我不想计算间距（图像，如果宽度是775像素）@Dominik .... div的宽度不完全，而2个容器的宽度可能不同

Answer 6

我不确定除了两个div之外还有其他HTML。您会在“ a”和“ b”之间使用div吗？所有div周围都会有包装器div吗？您可以使用CSS网格作为解决方案。

这是CSS：

    /* ideally this would be on a wrapper div instead of the body tag */
    body {
    display: grid;
    grid-template-rows: 90px 1fr 90px; /*This is the row heights*/
    grid-template-columns: 1fr;
    height: 100vh;
    width:90%;
    margin:0 auto;
    }

    .a {
    grid-row: 1 / 2;
    background-color: beige;
    }

    .b {
    grid-row: 3 / 4;
    background-color: aliceblue;
    }

那么您的标记将保持不变：

    <div class="a">A</div>   
    <div class="b">B</div>

将div居中在页面底部的问题

6 个答案: