1.水平定位
(1)行内元素: text-align: center
(2)块级元素: margin: 0 auto
(3) 子: position:absolute left:50% transform:translateX(-50%) 父: position:relative
(4) 父: display: flex; justify-content: center;
2.垂直定位
(1) 父: display: table-cell; vertical-align: middle;
(2) 父: display:flex + align-items: center
(3) 子: position:absolute top: 50%; transform: translateY(-50%); 父: position:relative
(4)设置line-height 等于height
3.水平垂直居中
- 子元素有宽度 width:50px;
A: 子: position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px;(去除掉子元素自带的宽度-对半)
父: position:relative
B: 子:position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
父: position:relative
- 子元素没有宽度
子 : position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
父: position:relative
(3) 父:display: flex; justify-content: center; align-items: center;