本经验介绍在 html/css 编写页面时，垂直居中inline, block等各种类型元素的多种方法的一个简要介绍。
工具/原料
1
Firefox
2
vscode
方法/步骤
1
最简单的情形是，内外元素尺寸都无限制。这个时候用padding和margin，保证上下相同即做到垂直居中。后面都是稍复杂一些的情形。
2
如果外层元素高度固定，内层只有单行问本，那么最简单的做法是设置内层的line-height和外层height相同，如图。多行文本不适用。
3
如果是table表格，希望表格单元内元素垂直居中，只需要设置表格单元td上下padding相同。
4
如果是div+css表格，希望表格单元内元素垂直居中，即通过display分别为table, table-row, table-cell等控制的表格，则对于display为table-cell的单元添加vertical-align: middle样式。
5
如果外层可以使用flex，希望内部元素垂直居中，那么外层元素添加justify-content和flex-direction属性，如图所示。
6
如果外层可以使用flex，希望内部元素垂直居中，那么也可以给内层元素添加上下margin为auto，实现垂直居中。
7
如果内层元素top和margin-top有效，且内层高度确定，可以组合两者实现居中。
8
如果内层元素top有效，内层高度不确定，可以组合top和transform实现居中，如图。
9
如果以上都不行，可以尝试ghost element方法。简单示意如图，在要居中元素前面添加一个占满高度的占位元素，后面基于前面定位。具体做法请另外查阅。
注意事项
如果遇到问题，可以在下面提出疑问。