前端css盒子水平垂直居中方案

整理的前端css盒子水平垂直居中方案

    A:父盒子:块级元素有宽高 子盒子:块级元素有宽高
    B:父盒子:块级元素有宽高 子盒子:行内元素由内容撑开
    
    1.适合A
    父盒子position: relative;
    子盒子position: absolute;top: 0; left: 0; right: 0; bottom: 0; margin: auto;

    2.适合B
    父盒子：display: table-cell; text-align: center; vertical-align: middle;

    3.适合A和B
    需要手动写死margin为子盒子宽度的一半
    父盒子position: relative;
    子盒子position: absolute;left:50%; top:50%;margin-top:-15px;margin-left:-15px）; 

    4.适合A和B
    父盒子position: relative;
    子盒子position: absolute;top: 50%; left: 50%;transform: translate(50%,-50%);

    5.适合A和B
    父盒子display: flex;justify-content: center;align-items: center;

    6.适合A和B
    父盒子display: flex;
    子盒子margin: auto;