如何将footer页脚内的水平列表完全居中显示

你现有代码无法实现完全居中的核心原因是浏览器会给<ul>元素预设默认左内边距和外边距，导致列表整体偏移。如果需要实现水平+垂直完全居中，还需要补充垂直方向的居中配置。

修正后的完整CSS代码 #

/* 可根据实际需求调整footer高度 */
footer {
  height: 150px;
  background: #f0f0f0; /* 可选，方便调试时查看居中效果 */
}

.footer-container {
  display: flex;
  justify-content: center;
  align-items: center; /* 新增：实现垂直方向居中 */
  height: 100%;
  flex-direction: row;
}

/* 新增：重置ul的浏览器默认样式 */
.social-media ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-media li {
  display: inline-block; /* 替换inline，避免上下边距不生效的问题，布局更稳定 */
  background-color: gray;
  margin: 25px;
  padding: 10px;
}

改动说明 #

• 重置<ul>的默认padding和margin，消除浏览器默认样式带来的列表偏移问题
• 给footer设置固定高度，同时给.footer-container添加align-items: center属性，实现列表在footer整个区域内的水平+垂直完全居中
• 将li的display属性从inline调整为inline-block，避免inline元素上下边距不生效的问题，样式可控性更高

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