有两种情况:
A:父盒子:块级元素有宽高 子盒子:块级元素有宽高,固定宽高
B:父盒子:块级元素有宽高 子盒子:行内元素由内容撑开,不固定宽高
1.适合A
父盒子position: relative;
子盒子position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;
2.适合A
需要手动写死margin为子盒子宽度的一半 父盒子position: relative; 子盒子position: absolute;left:50%; top:50%;margin-top:-15px;margin-left:-15px)
3.适合B
父盒子:display: table-cell; text-align: center; vertical-align: middle;
4.适合A和B ,transform 偏移
父盒子position: relative;
子盒子position: absolute;top: 50%; left: 50%;transform: translate(50%,-50%);
5.适合A和B:flex布局
父盒子display: flex;justify-content: center;align-items: center;
6.适合A和B
父盒子display: flex;
子盒子margin: auto;