如何实现页脚（footer）内内容的垂直居中？

你的页脚内容未垂直居中的核心原因是没有为容器设置垂直对齐规则，用Flex布局可以快速解决这个问题，以下是修改后的代码：

修改后的CSS代码 #

.footer{
    background-color: #252525;
    position:absolute;
    top:250%;
    left:0;
    width:100%;
    height: 60px; /* 建议用固定值替代百分比，避免不同屏幕高度适配问题 */
    overflow: hidden;
    z-index: 999;
    color: #C967F0;
    /* 核心垂直居中设置 */
    display: flex;
    align-items: center;
    padding: 0 15px; /* 给内容左右加内边距，避免贴边 */
}

.footer a{
    font-size: 1vw;
    color: #C967F0;
    margin-left: 35%; /* 保留原间距，若需要更灵活的间距可改用margin-left: auto */
}

.footer a img{
    width: 24px; /* 建议用固定像素替代百分比，避免图标大小异常 */
    height: auto;
    margin-left: 15px; /* 给图标和前一个链接加间距 */
}

关键修改说明 #

• 添加display: flex和align-items: center：这是Flex布局实现垂直居中的最简方案，能让所有子元素在容器垂直方向上自动居中
• 将height: 5%改为固定值60px：百分比高度依赖父元素的高度设置，固定值更稳定，适配不同屏幕
• 调整图标样式：用height: auto保持图标比例，添加margin-left让图标和"Go Up"链接之间有合理间距

原HTML代码无需修改 #

<div class="footer">
    ©2023 First Last
    <a href="#top">Go Up</a>
    <a href="https://github.com/"><img src="../static/GitLogo.png" alt="my github"></a>
</div>

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