2 篇博文 含有标签「垂直居中」

CSS 中 inset 属性大部分人可能没听过也没用过，其实就是 top right bottom left 的简写方式

inset: 0; 等价于：

div {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

同时 inset: 1px 2px; 等价于：

div {
  top: 1px;
  right: 2px;
  bottom: 1px;
  left: 2px;
}

inset: 1px 2px 3px; 等价于：

div {
  top: 1px;
  right: 2px;
  bottom: 3px;
  left: 2px;
}

inset: 1px 2px 3px 4px; 等价于：

div {
  top: 1px;
  right: 2px;
  bottom: 3px;
  left: 4px;
}

设置顺序依次为上、下、左、右，这点就和 margin padding 等属性的统一设置规则一样。

4 行缩成 1 行，在代码简化上，倒是起了很大的帮助。

最近遇到行内子元素垂直居中的需求，按照以往经验设置了子元素 vertical:middle 以及 display:inline-block，但是发现并没有效果。 几经周转查询了 vertical-align 的具体用法，发现主要是因为没有基线对照参照物，所以没有生效。

因此想到添加一个高度 100% 的空的行内元素，并且同时设置 vertical:middle 作为子元素的参照物。