Frontend►CSS

001-实现元素的水平垂直居中

实现元素的水平垂直居中

方法 1：Flexbox 布局（推荐）

1
2
3
4
5
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

原理：

  • display: flex 将父容器设为弹性布局。
  • justify-content 控制主轴（默认水平）对齐，align-items 控制交叉轴（默认垂直）对齐。
    优点：
  • 代码简洁，现代浏览器广泛支持。
  • 无需知道子元素尺寸。
    适用场景：
  • 现代浏览器项目（IE10+）。

方法 2：绝对定位 + transform

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

原理：

  1. top: 50%; left: 50% 将子元素左上角定位到父容器中心。
  2. transform: translate(-50%, -50%) 通过子元素自身宽高的50%反向偏移，实现真正居中。
    优点：
  • 兼容性好（IE9+）。
  • 不依赖子元素尺寸。
    缺点：
  • 绝对定位可能影响其他布局。

方法 3：Grid 布局

1
2
3
4
.parent {
  display: grid;
  place-items: center; /* 同时设置水平和垂直居中 */
}

原理：

  • place-items 是 align-items 和 justify-items 的简写，直接居中所有子项。
    优点：
  • 代码极简（一行搞定）。
  • 天然支持多子元素同时居中。
    适用场景：
  • 现代浏览器（IE不支持）。

方法 4：绝对定位 + margin（需已知子元素尺寸）

1
2
3
4
5
6
7
8
9
10
11
12
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;  /* height/2 */
  margin-left: -100px; /* width/2 */
}

原理：

  • 通过负 margin 抵消子元素宽高的一半。
    缺点：
  • 必须知道子元素精确尺寸。

方法 5：table-cell 布局（传统方法）

1
2
3
4
5
6
7
8
.parent {
  display: table-cell;
  text-align: center;     /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}
.child {
  display: inline-block; /* 或 inline */
}

原理：

  • 模拟表格单元格的对齐特性。
    缺点：
  • 父元素需固定宽高，且可能影响其他布局。

方法 6：line-height（单行文本垂直居中）

1
2
3
4
5
6
7
8
9
.parent {
  height: 200px;
  line-height: 200px; /* 等于父元素高度 */
  text-align: center;
}
.child {
  display: inline-block;
  line-height: normal; /* 重置子元素行高 */
}

适用场景：

  • 单行文本或行内元素。

总结对比

方法 是否需要子元素尺寸 兼容性 推荐度
Flexbox ❌ 不需要 IE10+ ⭐⭐⭐⭐⭐
绝对定位 + transform ❌ 不需要 IE9+ ⭐⭐⭐⭐
Grid ❌ 不需要 现代浏览器 ⭐⭐⭐⭐
绝对定位 + margin ✔️ 需要 所有浏览器 ⭐⭐
table-cell ❌ 不需要 所有浏览器 ⭐⭐

推荐选择：

  • 现代项目优先用 Flexbox 或 Grid。
  • 兼容旧项目用 绝对定位 + transform。
Frontend►CSS

002-BFC,IFC,z-index

CSS 格式化上下文与层叠规则详解

一、BFC(Block Formatting Context)

1.1 BFC 的形成条件

以下CSS属性可以创建一个新的BFC：

  • 根元素(<html>)
  • 浮动元素(float不为none)
  • 绝对定位元素(position为absolute或fixed)
  • display: inline-block | table-cell | table-caption
  • overflow不为visible的元素
  • display: flow-root(专门创建BFC，无副作用)
  • Flex容器(display: flex/inline-flex)
  • Grid容器(display: grid/inline-grid)
  • contain: layout | content | strict
  • 多列容器(column-count或column-width不为auto)

1.2 BFC 的核心特性

  1. 内部盒子垂直排列：BFC内的块级盒子会垂直方向一个接一个放置
  2. 边距不会合并：相邻盒子的垂直外边距不会合并
  3. 包含浮动元素：计算高度时会包含浮动子元素
  4. 隔离外部浮动：BFC区域不会与外部浮动元素重叠
  5. 独立布局环境：内部布局不影响外部，反之亦然

1.3 BFC 的实际应用

解决外边距合并

1
2
3
.container {
  display: flow-root; /* 创建BFC阻止外边距合并 */
}

清除浮动

1
2
3
.clearfix {
  overflow: auto; /* 创建BFC包含浮动元素 */
}

防止文字环绕

1
2
3
.content {
  overflow: hidden; /* 创建BFC避免与浮动元素重叠 */
}

二、IFC(行内格式化上下文)

2.1 IFC 的形成条件

当元素设置为display: inline | inline-block | inline-table等行内级元素时，会形成IFC。

2.2 IFC 的核心特性

  1. 水平排列：盒子在水平方向一个接一个排列
  2. 垂直对齐：通过vertical-align属性控制对齐
  3. **行框(line box)**：每一行生成一个矩形区域包含该行所有内容
  4. 高度计算：由行高(line-height)决定
  5. 断行规则：当宽度不足时会自动换行

2.3 IFC 的实际应用

垂直居中

1
2
3
4
.container {
  height: 100px;
  line-height: 100px; /* 通过行高实现垂直居中 */
}

基线对齐

1
2
3
.icon {
  vertical-align: middle; /* 与其他行内元素对齐 */
}

文字环绕效果

1
2
3
.text {
  display: inline; /* 默认IFC实现文字环绕 */
}

三、层叠上下文(z-index)

3.1 层叠上下文的形成条件

以下属性会创建新的层叠上下文：

  • 根元素(HTML)
  • position: relative/absolute/fixed且z-index不为auto
  • position: fixed(无需z-index)
  • Flex容器(display: flex)且z-index不为auto
  • Grid容器(display: grid)且z-index不为auto
  • opacity小于1
  • transform不为none
  • filter不为none
  • will-change指定了特定属性
  • isolation: isolate

3.2 层叠顺序规则(从下到上)

  1. 层叠上下文的背景和边框
  2. z-index为负的子元素
  3. 普通流中的块级元素
  4. 浮动元素
  5. 普通流中的行内元素
  6. z-index: auto或0的定位元素
  7. z-index为正的子元素

3.3 层叠上下文特性

  1. 局部作用域：子元素的z-index只在当前层叠上下文中有效
  2. 隔离性：不同层叠上下文的元素互不影响
  3. 绘制顺序：同级层叠上下文按z-index值排序

3.4 实际应用示例

解决z-index失效

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
  z-index: 1; /* 创建层叠上下文 */
}

.child {
  position: absolute;
  z-index: 9999; /* 只在parent上下文中有效 */
}

模态框实现

1
2
3
4
5
6
7
8
9
.modal {
  position: fixed;
  z-index: 1000; /* 确保在最上层 */
}

.overlay {
  position: fixed;
  z-index: 999; /* 在模态框下方 */
}

四、三者关系总结

特性 BFC IFC 层叠上下文
布局方向 垂直 水平 垂直于屏幕(z轴)
主要作用 块级元素布局 行内元素布局 控制元素显示层级
创建方式 特定CSS属性触发 行内级元素自动创建 特定CSS属性触发
典型应用 清除浮动、阻止边距合并 文字布局、垂直对齐 模态框、下拉菜单等层级控制