flex布局下footer div无法居中始终靠左如何解决

问题表现 #

尝试将footer设置为居中显示时，即使给.footer类配置了display: flex和justify-content: center属性，内容依然靠左对齐，未实现预期居中效果。

现有代码 #

HTML代码（core.blade.php） #

<div class="footer">
    <div class="row align-self-end">
        <p>Copyright 2021 Me. All Rights Reserved</p>
    </div>
</div>

原有CSS代码 #

.footer {
    background-color: #E21B4D;
    padding: 10px;
    justify-content: center;
    color: white;
    display: flex;
    align-items:center;
}

问题原因 #

代码中使用的.row是Bootstrap框架内置类，默认自带display: flex属性，且默认宽度为100%，会占满父容器.footer的整行宽度。此时.footer设置的justify-content: center实际作用在这个占满全宽的.row容器上，视觉上看不到居中效果；而.row内部的<p>标签默认靠左排列，最终呈现为内容靠左的状态。

可行解决方法 #

选择以下任意一种方案即可实现居中：

• 方案1：修正.row默认样式，让其适配内容宽度并居中内部元素

.footer .row {
    width: auto;
    justify-content: center;
    margin: 0; /* 清除row默认自带的左右负边距，避免布局偏移 */
}
.footer p {
    margin: 0; /* 清除p标签默认外边距，避免多余留白 */
}

• 方案2：直接给footer设置文本居中属性，无需额外调整flex逻辑

.footer {
    text-align: center;
}
.footer p {
    margin: 0;
}

• 方案3：移除多余的.row嵌套层，原有flex居中属性即可直接生效
  修改后HTML代码：

<div class="footer">
    <p>Copyright 2021 Me. All Rights Reserved</p>
</div>

内容的提问来源于stack exchange，提问作者Syachrayza Afdhal Haq