共计 2023 个字符，预计需要花费 6 分钟才能阅读完成。
CSS – 实现垂直居中的几种方式（特别：垂直居中）
1. 元素为未知宽高的元素 flexhttp://www.ruanyifeng.com/blo…
display: flex;
justify-content:center;
align-items:Center;
translate
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
flex 和 margin:auto
.box{
display: flex;
text-align: center;
}
.box span{margin: auto;}
2. 元素为为定宽定高（自身包含尺寸的元素）的元素绝对定位和负边距
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
绝对定位和 0 原理：当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性，具有流体特性绝对定位元素的 margin:auto 的填充规则和普通流体元素一模一样
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
参考：https://www.cnblogs.com/hutuz…https://www.zhangxinxu.com/wo…
CSS – 层叠上下文、层叠顺序以及 z -index
层叠上下文 1.HTML 中的根元素 <html></html> 本身 j 就具有层叠上下文，称为“根层叠上下文”。2. 普通元素设置 position 属性为非 static 值并设置 z -index 属性为具体数值（不能为 auto,chrome 特殊），产生层叠上下文。3.CSS3 中的新属性也可以产生层叠上下文父元素的 display 属性值为 flex|inline-flex，子元素 z -index 属性值不为 auto 的时候，子元素为层叠上下文元素；元素的 opacity 属性值不是 1；元素的 transform 属性值不是 none；元素 mix-blend-mode 属性值不是 normal`；元素的 filter 属性值不是 none；元素的 isolation 属性值是 isolate；will-change 指定的属性值为上面任意一个；元素的 -webkit-overflow-scrolling 属性值设置为 touch。
注意：chrome 中 position:fixed 的 z -index:auto，也会创建层叠上下文
层叠顺序
z-indexz-index 属性值并不是在任何元素上都有效果。它仅在定位元素（定义了 position 属性，且属性值为非 static 值的元素）上有效果判断元素在 Z 轴上的堆叠顺序，不仅仅是直接比较两个元素的 z -index 值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定
确定顺序 1. 是否处于同一个层叠上下文中，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。2. 如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。3. 当两个元素层叠等级相同、层叠顺序相同时，在 DOM 结构中后面的元素层叠等级在前面元素之上。
补充新增：定位元素会层叠在普通元素的上面元素一旦成为定位元素，其 z -index 就会自动生效，此时其 z -index 就是默认的 auto，也就是 0 级别，根据上面的层叠顺序表，就会覆盖 inline 或 block 或 float 元素。而不支持 z -index 的层叠上下文元素天然 z -index:auto 级别，也就意味着，层叠上下文元素和定位元素是一个层叠顺序的
实战在实际项目中，我们可能会渐进使用 CSS3 的 fadeIn 淡入 animation 效果增强体验，有一个绝对定位的透明层覆盖在图片上, 添加一些描述信息
现象：一旦图片开始走 fadeIn 淡出的 CSS3 动画，文字跑到图片后面去了原理：opacity 的值不是 1 的时候，是具有层叠上下文的，层叠顺序是 z -index:auto 级别，跟没有 z -index 值的 absolute 绝对定位元素是平起平坐的。而本 demo 中的文字元素在图片元素的前面，于是，当 CSS3 动画只要不是最终一瞬间的 opacity: 1，位于 DOM 流后面的图片就会遵循“后来居上”准则，覆盖文字解决：提高文字的层叠顺序，例如，设置 z -index:1
参考：https://www.zhangxinxu.com/wo…https://juejin.im/post/5b876f…
CSS – BFC
CSS – Flex
http://www.ruanyifeng.com/blo…