使用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，占据剩余空间的一半
目标元素自动被“推”到中间位置
示例代码：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
这样，.center-content就会在页面中
垂直居中
，无需知道其具体高度。
立即学习
“
前端免费学习笔记（深入）
”；
使用::after实现右对齐或尾部追加内容
在Flex布局中，::after常用于在主内容后插入装饰性元素或实现右对齐效果，比如导航栏中的登录按钮靠右显示。
应用场景：
导航条中主要菜单左对齐，登录/注册按钮右对齐
聊天气泡中时间戳靠右
示例代码：
虽然现代做法更推荐直接使用margin-left: auto，但在需要插入视觉分隔符或保持结构对称时，::after仍具优势。
双伪元素实现两端对齐与居中平衡
当希望内容在中间，但前后都有弹性空间时，可同时使用::before和::after。
适用情况：
模态框垂直居中（上下留白相等）
卡片内容动态居中，适应不同屏幕尺寸
代码示例：
此时，顶部和底部的伪元素会均分剩余空间，使中间内容真正居中。
基本上就这些。伪元素 + Flex 的组合灵活且语义清晰，适合在不破坏HTML结构的前提下实现复杂对齐逻辑。注意content属性不可省略，否则伪元素不会渲染。合理运用，能让布局更简洁。
.center-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.center-container::before {
content: '';
flex: 1;
}
.center-content {
/* 要居中的内容 */
}
.nav {
display: flex;
}
.nav::after {
content: '';
flex: 1;
}
.nav-item:last-child {
margin-left: auto; /* 或直接用margin-left: auto实现更简洁 */
}
.modal-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.modal-container::before,
.modal-container::after {
content: '';
flex: 1;
}
.modal-content {
/* 居中区域 */
}