小知识，大挑战！本文正在参与“程序员必备小知识”创作活动 一 水平垂直居中 如何实现水平垂直居中可以说是CSS面试题中的经典面试题，在多年前这个面试题给很多同学都带来了困惑，但Flexbxo布局模块和CSS Grid布局模块的到来，可以说实现水平垂直居中已是非常的容易。
Flexbox中实现水平垂直居中 在Flexbox布局模块中，不管是单行还是多行，要让它们在容器中水平垂直居中都是件易事，而且方法也有多种。最常见的是在Flex容器上设置对齐方式，在Flex项目上设置 margin:auto。
先来看在Flex容器上设置对齐方式。
Flex容器和Flex项目上设置对齐方式
你可能已经知道在Flex容器上设置 justify-content、align-items 的值为 center 时，可以让元素在Flex容器中达到水平垂直居中的效果。来看一个示例：
/* CSS */ .flex__container { display: flex; justify-content: center; align-items: center; } 这种方式特别适应于让Icon图标在容器中水平垂直居中，不同的是在Icon图标容器上显示设置 display: inline-flex。比如下面这个示例：
/* CSS */ .flex__container { display: inline-flex; align-items: center; justify-content: center; } 在这种模式之下，如果要让多个元素实现水平垂直居中的效果，那还需要加上 flex-direction: column，比如：
/* CSS */ .flex__container { display: flex; flex-direction: column; justify-content: center; align-items: center; } 在Flexbox布局中，还可以像下面这样让Flex项目在Flex容器中达到水平垂直居中的效果：
/* CSS */ .flex__container { display: flex; // 或inline-flex justify-content: center; }
.flex__item { align-self: center; } 如果在Flex容器中有多个Flex项目时，该方法同样有效：
.flex__container { display: flex; // 或inline-flex justify-content: center; }
.flex__container > * { align-self: center; }
