Bootstrap中div内图片设置max-width后text-center不生效无法居中问题

问题触发原因 #

• 你给.img-rsa容器设置了display: block+max-width: 350px+width: 100%后，当容器的父元素宽度大于350px时，这个div的实际渲染宽度会被限制为350px。块级元素在未设置水平margin自动居中时，默认会靠父容器左侧对齐。
• 你给div加的text-center类仅能让内部图片在div自身的350px宽度范围内居中，但是div本身没有在父容器中居中，视觉上就会出现图片没有全局居中的效果。
• 移除max-width后，div的宽度会默认撑满整个父容器，此时text-center控制的内部居中就等同于全局居中，所以看起来效果恢复正常。

修复方案 #

你可以任选以下两种方式解决：

1. 手动修改CSS，给.img-rsa新增水平自动边距属性：

.img-rsa {
    width: 100%;
    max-width: 350px;
    display: block;
    margin: 0 auto; /* 新增这行，让块级容器本身在父元素中水平居中 */
}

2. 直接使用Bootstrap内置的mx-auto类，不需要修改自定义CSS：

<div class="img-rsa g-4 align-self-center text-center mx-auto">
  <img src="img/aluno-rsa.jpg" alt="" class="img-fluid" style="border-radius:100%">
</div>

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