在页面底部居中 div 的问题答案

【问题标题】：Problem to center div on bottom of the page在页面底部居中 div 的问题
【发布时间】：2020-08-31 00:34:37
【问题描述】：

我有 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>

【问题讨论】：

只需添加 left:0;对：0；到.b上的css

标签： html css

【解决方案1】：

我没有足够高的声誉来评论答案，但你可以使用

left: 0; right: 0;

在您的 .b div 上，无需在其周围放置容器。我已经尝试过了，并且在 Google Chrome 下工作。

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

【讨论】：

【解决方案2】：

因此，使用position: fixed，您已经有效地将该元素从 DOM 流中分离出来，因此margin: 0 auto 现在已无关紧要，相反，您需要执行其他几个选项之一来实现您的目标。几个例子（注意：sn-p 编辑器也不能很好地完成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>

或，

.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>

希望这会有所帮助，干杯。

【讨论】：

【解决方案3】：

我不确定除了两个 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>

【讨论】：

【解决方案4】：

给.b以下内容：

left: 5%;

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

【讨论】：

好吧，从您发布的内容来看，这将起作用。你给了.b位置固定；因此，给它宽度 90% 和左边 5% 会使它居中。这就是你的数学题。

【解决方案5】：

您想要页眉和页脚吗？页脚总是在底部？使用更现代的 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;
}

问：它是如何工作的？
A：主要是弹性垫片。

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

【讨论】：

【解决方案6】：

@chris..... 解决方案 A 不起作用，B 我想保持不变 html @utkanos.....left: 5% 很好，但我不想计算中间的空间（如果宽度的图像是 775 像素）@Dominik.... div 不是完全宽度，2 个容器可能是不同的宽度

【讨论】：