如何使用CSS伪元素::before和::after实现表单在页面宽度方向居中

实现代码 #

可直接使用以下CSS样式，通过::before/::after伪元素实现目标元素水平居中效果：

/* 重置body默认边距，设置弹性布局占满视口宽度 */
body {
  margin: 0;
  display: flex;
  width: 100vw;
}
/* 左右伪元素平分剩余空间，实现中间内容居中 */
body::before,
body::after {
  content: "";
  flex: 1;
}
/* 居中容器样式，宽度可根据实际需求调整 */
.cont {
  width: 320px; /* 可替换为你的表单实际宽度 */
}

实现说明 #

• 给body设置flex布局后，::before会作为body的第一个子元素渲染在页面最左侧，::after作为最后一个子元素渲染在页面最右侧
• 两个伪元素设置flex: 1后，会自动占满除中间内容宽度外的所有剩余空间，自然把中间内容挤压到页面水平居中的位置
• 如果你需要把body内的三个div作为整体居中，只需给三个div额外包裹一层父容器，将上面.cont的样式写到该父容器上即可

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