html元素分为block元素和inline元素。
- inline元素水平居中
设置外层元素的text-align: center
- block元素水平居中
- 设置元素自身的样式margin: 0 auto
- 设置父元素display: flex; justify-content: center;
- block元素水平垂直居中 定宽 (子元素宽高100px)
- 设置父元素的position: relative, 子元素position: absolute, top: 50%, left 50%, margin: -100px, 0, 0 -100px.
- block元素水平垂直居中 不定宽,将定宽的子元素的margin改为
transform: translate(-50%, -50%)。