在前端页面的开发中，很有可能会应用到内容居中的需求。收集了一些资料，总结了css中的几种居中效果，实现了第一个常见的text-align:center。首先，将子元素从块级元素更改为行内元素。即display:inline-block父元素设置为text-align:center兼容：IE6,IE7二、使用table+margin设置子元素成块级表格显示类似（
），以及设置子框居中，实现水平居中兼容：不支持IE6、IE7parentchilddisplay:table;保证金：0自动；第三种使用absolute+transform将子元素设置为绝对定位，移动子框，使子元素左侧与相对左边框的距离为相对子框宽度的一半，然后移动子框向左半宽度实现水平居中。兼容性：css3属性兼容性存在一些问题，高版本需要添加前缀position:relative；/*父母*/位置：绝对；/*child*/left:50%;transform:translateX(-50%);第四种使用flex+margin通过父元素的flex布局将子frame转化为flexitem，然后设置子元素水平居中兼容性：不支持IE6、IE7、IE8display:flex;/*parent*/margin:0auto;/*children*/第五个（水平和垂直）结合水平居中的absoulte+transform和垂直居中的absoulte+transform兼容性：CSS3属性兼容性问题position:relative;/*父母*/位置：绝对；/*child*/left:50%;top:50%;transform:translate(-50%,-50%);第六父级相对子级绝对相对，上、下、左、右+margin居中兼容：IE8及以上位置：relative；/*parent*/---------------------------position:absolute;/*子*/左：0；上：0；右：0；底部：0；边距：自动；
