现代前端 CSS 布局核心技巧

1. 完美居中

以前垂直居中是前端的噩梦，现在只需三行代码：

.container {
  display: grid;
  place-items: center;
}

2. Flexbox 响应式间距

利用 gap 属性替代繁琐的 margin，让组件排列更加优雅：

.flex-row {
  display: flex;
  gap: 16px;
}

3. CSS 变量管理主题

通过 :root 声明全局 CSS 变量，轻松实现暗黑模式切换，代码更加易读与维护。