
## 方案1：Flexbox（最推荐，现代项目首选）

```css
.parent {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中（可选） */
  height: 300px;            /* 父元素必须有高度 */
}
```

## 方案2：Grid（更简洁，但兼容性略差）

```css
.parent {
  display: grid;
  place-items: center; /* 垂直+水平同时居中 */
  height: 300px;
}
```

原理：place-items 是 align-items 和 justify-items 的简写，center 让子项在网格单元内垂直和水平居中。

## 方案3：绝对定位 + transform（万能方案，兼容性好）

```css
.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

## 方案4：绝对定位 + margin: auto（老方案，面试常问）

原理：top: 0; bottom: 0; 让子元素在垂直方向上被拉伸，margin: auto 自动分配剩余空间。
```css
.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}
```

适用场景：必须指定子元素宽高，适合固定尺寸的元素。

## 方案5：table-cell

## 


整理 Flexbox、Grid、定位等常见元素垂直及水平居中方案。

如何实现元素垂直居中？


### 父容器属性（6 个，必掌握）

| 属性 | 描述 | 值 |
| --- | --- | --- |
| display | 开启 Flex 布局 | flex; |
| flex-direction| 水平方向布局 | row, row-reverse, column, column-reverse |
| align-items | 交叉轴对齐 | center, flex-start, flex-end, stretch |
| align-content | 侧轴对齐 (控制多行子元素在交叉轴上的整体对齐方式（只有 flex-wrap: wrap 且有多行时才生效）。) | center, flex-start, flex-end, space-between, space-around, space-evenly |
| justify-content | 主轴对齐 | center, flex-start, flex-end, space-between, space-around, space-evenly |
| flex-wrap | 换行 | nowrap, wrap |


### 子元素属性

| 属性 | 描述 | 值 |
| --- | --- | --- |
| flex-grow | 子元素放大比例(占剩余空间的 N 倍数) | 0, 1, 2, ... |
| flex-shrink | 子元素缩小比例(占已占空间的 N 倍数) | 0, 1, 2, ... |
| flex-basis | 子元素初始大小 | auto(根据 width/height 决定), 100px, 200px, ... |
| flex | 子元素总属性(flex-grow、flex-shrink、flex-basis 的简写) | 0 1 auto, 1 1 200px, 2 0 100px, ... |
| align-self | 单独设置子元素的交叉轴对齐方式 | center, flex-start, flex-end, stretch |
| order | 子元素排序(改变元素的布局顺序) | 0, 1, 2, ... |


通过示例梳理 Flex 容器与子元素的常用属性及布局方式。

Flex 怎么用：常用属性详解


# CSS

## CSS 单位

绝对单位包括 `cm`、`mm`、`in`、`pc`、`pt`、`px`。相对单位包括：`em`（相对父元素字体大小）、`ex`（字符 x 的高度）、`ch`（数字 0 的宽度）、`rem`（根元素字体大小）、`lh`（元素的 `line-height`）、`vw`、`vh`、`vmin` 和 `vmax`（相对视口尺寸）。

## BFC

BFC（块级格式化上下文）是一块独立的布局环境，内部元素的布局与外部互不影响。BFC 中的盒子通常按垂直方向排列，同一 BFC 内相邻盒子的垂直外边距可能合并；计算 BFC 高度时，浮动子元素也会参与计算，BFC 区域不会与浮动盒子重叠。

常见触发方式：根元素、`float` 不为 `none`、`position: absolute/fixed`、`overflow` 不为 `visible`、`inline-block`、`table-cell`、`flex` 等。

常见用途：清除浮动、避免外边距合并、避免非浮动元素被浮动元素覆盖以及解决父元素高度塌陷。

IFC 是行内格式化上下文，GFC 是网格布局格式化上下文，FFC 是弹性格式化上下文。

## 垂直居中与隐藏元素

原笔记记录的垂直居中方式包括：使用表格布局，将父元素设置为 `display: table`、子元素设置为 `display: table-cell`，使用 `transform: translateY(-50%)`，使用绝对定位配合 `margin: auto`，以及使用 Flex 布局。

隐藏元素可以分为三类：

- 完全隐藏：`display: none` 或 `hidden` 属性，元素不再参与渲染。
- 视觉隐藏：`opacity: 0`、`visibility: hidden`，或将绝对定位元素移出可视范围；这些方式通常仍会占据空间或保留布局影响。
- 语义隐藏：使用 `aria-hidden="true"` 表示辅助技术不应读取该内容。

## 浮动与定位

浮动最初用于实现文字环绕图片的排版。浮动元素会脱离普通文档流，并彼此贴靠；一行空间不足时会换行。清除浮动可以使用父元素固定高度、`clear`、额外的清除元素、伪元素或 `overflow: hidden` 触发 BFC。原笔记指出，现代布局通常优先使用 Flex，浮动主要用于兼容旧场景。

`position` 的含义：`static` 是默认的普通流定位；`relative` 相对自身原位置偏移且不脱离文档流，也可作为绝对定位子元素的参考；`absolute` 相对最近的已定位祖先元素定位，没有该祖先时参考文档；`fixed` 相对浏览器窗口定位；`sticky` 在达到阈值前表现为相对定位，达到阈值后表现为固定定位。

## 层叠、计算与引入

CSS 属性的计算大致经历：确定声明值、解决层叠冲突、使用继承值、使用浏览器默认值。层叠判断主要看重要性、选择器专用性和源码顺序；原笔记给出的常见优先级顺序是行内样式高于 ID、类、高于标签，同权重时后声明的覆盖先声明的，`!important` 优先级最高但应少用。

CSS 可通过 `link` 外联、`style` 内联和 `@import` 引入。`@import` 是 CSS 规则，加载通常晚于外部样式表，存在兼容性和 DOM 控制方面的限制。

## 过渡、动画与盒模型

`transition` 是由属性、持续时间、时间函数和延迟组成的复合属性，可用 `transitionend` 监听完成。CSS 动画通过 `@keyframes` 声明关键帧，再用 `animation` 指定动画名和时间。

盒模型有 `content-box` 和 `border-box`。前者的 `width` 只表示内容宽度，实际宽度还要加上内边距和边框；后者的 `width` 包含内容、左右内边距和左右边框，计算更方便。

## 响应式与其他

`calc()` 可计算长度、数值、角度和频率。媒体查询可以写在 `link` 的 `media` 属性、`@import` 或 `@media` 规则中。


整理 CSS 单位、BFC、布局定位、层叠、动画和盒模型等基础知识。

CSS学习笔记

如何实现元素垂直居中？

Flex 怎么用：常用属性详解

CSS 基础与布局笔记