水平垂直居中

inline 行内元素

提示

行内元素设置 width、height 是不生效的。

通过 text-align: center 来实现水平居中。
通过 line-height 和 height 来实现垂直居中，不过需要设置 line-height 的高度与 height 相等。

flex

`justify-content` 和 `align-items`

flex 容器设置 justify-content 和 align-items

`margin: auto`

子元素设置 margin: auto

grid

`place-items`

`margin: auto`

子元素设置 margin: auto

position

偏移量 + transform

通过 position 的 偏移量(top、left)和 transform(translate) 来实现。

偏移量 + margin

将 position 的各方向的偏移量设置相同，然后使用 margin: auto。

table

在 display: table-cell 下，通过 text-align 和 vertical-align 来实现水平垂直居中。