如何用CSS将文本居中显示在HTML页面底部？

问题根源分析 #

1. 使用position:fixed时：该定位会让元素脱离文档流，不再受父容器main的约束，仅设置bottom:0只会让元素贴紧视口底部，但默认靠左对齐，缺少水平居中的必要样式。
2. 使用position:absolute时：父容器main没有设置足够高度，它的高度仅由内部内容撑开，导致bottom:0只能对齐到内容底部，而非页面底部。

方案1：固定在视口底部居中（适用于始终贴在页面最底部） #

修改.bottom的CSS，通过left:0; right:0让元素撑满视口宽度，借助父元素的text-align:center实现文本居中：

main {
    position: relative;
    text-align: center;
    max-width: 240px;
    margin: 0 auto;
}

.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

如果希望底部文本保持和main一致的宽度居中，可以调整为：

.bottom {
    position: fixed;
    bottom: 0;
    max-width: 240px;
    width: 100%;
    margin: 0 auto;
}

方案2：固定在main容器底部居中（适用于跟随容器范围） #

给main设置min-height: 100vh，让它占满整个视口高度，再用absolute定位让文本对齐到容器底部：

main {
    position: relative;
    text-align: center;
    max-width: 240px;
    margin: 0 auto;
    min-height: 100vh; /* 关键：让容器撑满视口高度 */
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

为什么之前的尝试无效？ #

• position:absolute无效果：因为main没有高度，它的底部就是内部文本的底部，设置min-height:100vh才能让容器延伸到页面底部。
• margin:0 auto无效果：对于脱离文档流的定位元素（fixed/absolute），默认宽度是内容宽度，需要先设置width:100%或left:0;right:0，margin:auto才能生效。

内容的提问来源于stack exchange，提问作者Psionman