如何实现CSS绝对定位页脚父元素中子元素的垂直水平居中？

以下是满足你需求的完整代码实现，同时会拆解每个部分的作用：

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 确保浏览器窗口作为容器，清除默认样式 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* 底部固定的footer容器 */
        .parent {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px; /* 自定义footer高度 */
            background-color: #f0f0f0; /* 背景色方便区分，可按需修改 */
        }

        /* 实现文本垂直水平居中 */
        .child {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Some Text Centered</div>
    </div>
</body>
</html>

代码说明 #

• html, body 样式：设置height: 100%让根元素铺满浏览器视口，清除默认的margin和padding，避免出现不必要的滚动条或空隙，确保浏览器窗口作为容器的效果。
• .parent 样式：
  • position: absolute结合bottom: 0实现固定在浏览器底部；
  • left: 0和right: 0让footer宽度自动铺满整个窗口；
  • 自定义height设置footer的高度，添加背景色是为了直观区分，可根据需求调整或移除。
• .child 样式：
  • 使用Flexbox布局，display: flex开启弹性盒模型；
  • align-items: center实现垂直方向居中；
  • justify-content: center实现水平方向居中；
  • height: 100%和width: 100%让子元素占满父容器的空间，确保居中效果覆盖整个footer区域。

备选方案（Grid布局） #

如果你更倾向于使用Grid布局，.child的样式可以替换为：

.child {
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
}

这种写法更简洁，同样能实现垂直水平居中的效果。

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