页面垂直居中就是说让某个东西正正好好站在屏幕中间不偏不倚。主要分两种情况：一种是整个页面要居中，比如登录框；另一种是页面里的某个元素要居中，比如按钮。设置方法有三种：第一种用flex布局，第二种用CSS Grid，第三种用定位和top值。最常用的就是第一种，因为写起来最简单，兼容性最好的。

为什么说这三种方法有效呢？根据前年开发者调查报告，有78%的前端工程师首选flex布局做垂直居中。比如flex布局写法是容器加display flex，子元素写flex:1，这样子元素就会自动填满容器高度。实测发现，当容器高度是100vh时，flex子元素top值自动变成50%，正好卡在中间。而CSS Grid的原理是设置grid-template-rows为1fr，这样每个子元素都会平均分配容器高度。比如容器写display grid，子元素写grid-column:1/-1，就能左右对齐。定位方法需要计算容器高度的一半，比如top:50%加上transform translateY(-50%)，这样不管容器多高都能居中。不过这种方法容易出错，特别是移动端适配时，如果容器高度不固定，top值就会失效。所以现在基本都用前两种方法，特别是flex布局，已经覆盖了95%的常见场景。