第一种：定位+margin:auto.container{position:relative;宽度：300px；高度：300px；背景：黄色；}.box{位置：绝对；左：0；顶部：0；右：0；底部：0；保证金：自动；宽度：100px；高度：100px；背景：红色；更好，但缺点：不支持IE7以下浏览器第二种：positioning+margin-left+margin-top.container{position:relative;宽度：300px；高度：300px；背景：黄色；}.box{位置：绝对；左：50%；顶部：50%；左边距：-50px；边距顶部：-50px；宽度：100px；高度：100px；第三种宽高：positioning+transfrom.container{position:relative;宽度：300px；高度：300px；背景：黄色；}。盒子{位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；宽度：100px；高度：100px；背景：红色；:兼容性不好，只支持IE9+浏览器Type4:Flexbox.container{display:flex;证明内容：居中；对齐项目：居中；宽度：300px；高度：300px；背景：黄色；}.box{宽度：100px；高度：100px；背景：红色；}第五个首选移动端：flex+margin:auto.container{display:flex;宽度：300px；高度：300px；背景：黄色；}.box{边距：自动；宽度：100px；高度：100px；背景：红色；}移动端首选第六种：formtable-cell，子元素设置display:inline-block.container{display:table-cell;垂直对齐：中间；文本对齐：居中；宽度：300px；高度：300px；背景：黄色；}.box{显示：内联块；宽度：100px；高度：100px；背景：红色；}注意：兼容性：由于display:table-cell，IE67不兼容第七种：line-height+display:inline.container{width:300px;高度：300px；行高：300px；文本对齐：居中；背景：黄色；}.box{显示：内联；背景：红色；