CSS弹窗头部被关闭按钮挤压左移无法居中如何解决

问题原因 #

你设置的关闭按钮用了float: right属性，浮动元素虽然脱离了常规文档流，但仍然会挤占同一行其他普通元素的排版空间：你的标题<h1>是块级元素，默认占满父容器整行宽度，右侧被浮动的关闭按钮占据了一块空间后，text-align: center是在扣除关闭按钮宽度后的剩余空间内做居中对齐，所以整体看起来标题偏左。

推荐解决方法 #

方法1：用绝对定位放置关闭按钮（改动最小） #

1. 先给弹窗内容容器加相对定位，作为关闭按钮的定位父级：

.popUpContent{
    position: relative;
    /* 原有其他属性保留，你原来写的justify-content只有flex布局生效，inline-block下无效可以删掉 */
}

2. 修改关闭按钮的样式，删掉浮动，改用绝对定位：

.close{
    /* 删除float: right; */
    position: absolute;
    top: 20px;
    right: 5%;
    /* 原有其他属性保留 */
}

这样关闭按钮完全脱离文档流，不会挤占标题的排版空间，标题就会基于整个弹窗内容容器的宽度居中。

方法2：单独封装头部容器（更易维护） #

把关闭按钮和标题放在同一个头部容器内用flex布局，结构更清晰：

<div class="popUpContent">
    <div class="modalHeader">
        <h1 class="trainingPopUpHeader">How to Change Labels</h1>
        <div class="close">+</div>
    </div>
    <!-- 其余内容保留 -->
</div>

新增对应CSS：

.modalHeader{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 4%;
}
/* 可以删掉trainingPopUpHeader原来的margin-top，避免间距重复 */

关闭按钮依然使用上述的绝对定位样式即可。

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