css实现水平垂直居中

未知宽高 1、把父元素设置成table，子元素为table-cell，然后用vertical-align：center     优点：父元素可以改变高度     缺点：IE8以下不支持，且对img无效果   2、用一个空标签并设置vertical-align的基准线为中间，并让它inline-block，宽为0，高度100%     缺点：多了没用的空标签，且转为行内块               IE6、7不支持  （可用_zoom：1；*display：inline解决兼容）   3、让该元素的父元素line-height=height，并转成行内块，在vertical-align     缺点：只适用于HTML5   已知宽高 给父元素相对定位，子元素绝对定位 1、绝对定位；margin：auto；top：0；left：0；bottom：0；right：0；   2、绝对定位；top：50%；向上移动高的一半（负数）             left：50%；向左移动宽的一半（负数）   3、绝对定位；top：50%；left：50%；transform：translate（-50%，-50%）   已知或未知 给父元素body加（display：flex；justify-content：center；align-items：center） 给html、body加（height：100%）