css的上下左右居中显示

css的基础知识，基于子元素宽高不确定的情况

方法1：利用定位实现和margin实现

    父级元素：position:relative

    子元素：position:absolute;top:0px;bottom:0px;left:0px;right:0px;

                margin:auto;

方法二：基于flex弹性盒子布局

        父元素：display:flex;justity-content:center;align-items:center;

    解释：display：flex     flex为flexible box的缩写，弹性布局为盒模型提供最大灵活性

               justity-content:center   项目在主轴上的对齐方式

               align-items:center        项目在交叉轴上的对齐方式

方法三：以表格单元格的形式布局

        父元素：display：table-cell  ;vertical-align:middle;  text-align:center;

        子元素：margin：auto；  或者    disply：inline-block；

方法四：位移实现：

        子元素：position：absolute；top：50%；left：50%；

                    transform:translate(-50%;-50%);  

                    兼容性：-webkit-transform:translate(-50%;-50%);  谷歌，搜狗，遨游，qq，360，世界之窗等，chrom，safira内核识别码

                                -moz-transform:translate(-50%;-50%);        火狐内核识别（firefox）

                                -o-transform:translate(-50%;-50%);            欧朋内核识别码

                                -ms-transform:translate(-50%;-50%);        IE内核识别码