实现垂直水平居中的方法

Posted 2021-03-22 sphjy

1. 定位 --- top 50% left 50%
(1) 知道宽高的情况下margin-left margin-top 给个 ( -1/2 宽高 )
(2) 不知道的请况 translate(-50%,-50%)
2. flex --- display:flex;
(1) 水平方向 justify-content：center
(2) 垂直方向 align-items: center
3. table-cell
(1) 父级元素display:table-cell;
(2) 垂直 vertical-align: middle;
(3) 水平 text-align: center;
(3) 内部子元素 display：inline-block;
4. 子元素绝对定位 top left right bottom 设置为 0 margin:auto;