CSS如何实现页面内图片与文本的均匀居中对齐？

原有代码问题 #

• 外层容器.contact-main-container未声明display: flex，直接写justify-content: center不会触发flex布局规则，属性不生效
• 仅靠单个元素的margin-bottom控制间距，没有统一的间距规则，容易出现排布不均、底部留白异常的问题
• 未限制链接容器宽度，宽屏场景下内容会被无规则拉伸，对齐基准混乱
• max-height: 100vw属于错误赋值，视口宽度单位不适合作为高度属性值，会导致容器高度显示异常

修复后完整代码 #

CSS部分 #

/* 重置浏览器默认边距，避免默认样式干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.contact-main-container{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 40px 20px;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    color: #e0e7ff;
    border: 2px solid black;
}

.contact-links-container{
    border: solid 1px black;
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 32px;
}

.contact-link{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

.contact-link img{
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

HTML部分 #

原生HTML使用时将className替换为class，React/JSX项目可直接保留原有结构：

<div class="contact-main-container">
  <header>
    <h1>Contact Me</h1>
  </header>
  <div class="contact-links-container">
    <section class="contact-link">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
      <a>rsteward117@gmail.com</a>
    </section>
    <section class="contact-link">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
      <a>Github</a>
    </section>
    <section class="contact-link">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
      <a>Linkedin</a>
    </section>
  </div>
</div>

实现效果 #

• 整体容器垂直、水平双居中于页面
• 标题、每个图文项的间距完全统一，无偏移
• 图文项内部图片和文字对齐整齐，不会出现错落
• 适配移动端和宽屏场景，不会出现拉伸变形

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