元素垂直居中的7种方式

//开发中经常遇到问题，即让某个元素垂直居中，内容不仅仅限制于文字，可能是图片或者其他元素

/*

区分：

1.居中元素(子元素)的宽度已知

2.居中元素宽度位置

        1.利用定位 + margin:auto; (定位：top,left,right,bottom:0,子margin:auto)
        2.利用定位 + margin:负值;(定位，top:50%；left:50%;margin-left:-子元素宽度一般；marigin-top:-子元素高度度一般)
        3.利用定位 + transform;(定位，top:50%,left:50%,transform:translate(-50%,-50%))
        5.table布局;(table布局(父元素使用margin无效);父元素设置display：table-cell,vertical-align:middle,text-align:center;子元素：display:inline-block)
        6.flex布局;(flex布局(父元素使用margin有效);父元素设置display：flex;justify-content：center，align-items:center;)
        7.grid 布局;(grid(网格布局)父元素使用margin有效;(父元素使用display:grid;align-items:center,justiyf-content:center))

    内联元素水平居中：
        行内元素:设置text-align：center;
        flex布局可设置父元素：display:flex;justiyfy-content:center

*/