CSS variable width block element horizontally centered vertically.

1、use flex layout.

flex布局实现水平垂直居中
2、use table layout.
grid 布局实现水平垂直居中

3、use CSS table-cell layout.

CSS table-cell布局实现水平垂直居中

4、use position absolute + CSS3 transform layout.

绝对定位+transform布局实现水平垂直居中
5、use inline-block + empty element layout.
inline-block + 空元素布局实现水平垂直居中
6、use grid layout.
grid 布局实现水平垂直居中
7、use writing-mode layout.
writing-mode 布局实现水平垂直居中
8、use line-height layout.
line-height 布局实现水平垂直居中