使用CSS伪元素结合Flex布局可实现高效居中对齐。1. 通过::before设置flex: 1，配合display: flex实现子元素垂直水平居中；2. 利用::after在Flex容器中插入弹性占位，辅助右对齐或尾部追加内容；3. 同时使用::before和::after均分剩余空间，实现内容真正居中。该方法无需额外标签，结构清晰，兼容性好，适用于模态框、导航栏等场景，需注意content属性不可省略。
使用CSS伪元素结合Flex布局实现居中对齐，是一种优雅且兼容性良好的技巧。它不仅能帮助我们实现视觉上的完美居中，还能在不增加额外HTML标签的前提下增强样式表现力。
利用::before实现垂直水平居中
通过给容器添加一个伪元素::before，并将其设置为全宽全高的“占位”元素，再配合flex属性，可以轻松实现单个子元素的居中。
关键点：- 父容器设置display: flex;
- ::before伪元素设置flex: 1，占据剩余空间的一半
- 目标元素自动被“推”到中间位置
示例代码：
.center-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.center-container::before {
content: '';
flex: 1;
}
.center-content {
/* 要居中的内容 */
}
这样，.center-content就会在页面中垂直居中，无需知道其具体高度。
立即学习“前端免费学习笔记（深入）”；
使用::after实现右对齐或尾部追加内容
在Flex布局中，::after常用于在主内容后插入装饰性元素或实现右对齐效果，比如导航栏中的登录按钮靠右显示。
应用场景：- 导航条中主要菜单左对齐，登录/注册按钮右对齐
- 聊天气泡中时间戳靠右
示例代码：
.nav {
display: flex;
}
.nav::after {
content: '';
flex: 1;
}
.nav-item:last-child {
margin-left: auto; /* 或直接用margin-left: auto实现更简洁 */
}
虽然现代做法更推荐直接使用margin-left: auto，但在需要插入视觉分隔符或保持结构对称时，::after仍具优势。
双伪元素实现两端对齐与居中平衡
当希望内容在中间，但前后都有弹性空间时，可同时使用::before和::after。
适用情况：- 模态框垂直居中（上下留白相等）
- 卡片内容动态居中，适应不同屏幕尺寸
代码示例：
.modal-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.modal-container::before,
.modal-container::after {
content: '';
flex: 1;
}
.modal-content {
/* 居中区域 */
}
此时，顶部和底部的伪元素会均分剩余空间，使中间内容真正居中。
基本上就这些。伪元素 + Flex 的组合灵活且语义清晰，适合在不破坏HTML结构的前提下实现复杂对齐逻辑。注意content属性不可省略，否则伪元素不会渲染。合理运用，能让布局更简洁。
