css水平垂直居中多种方法

html5:css3

方式/步调

1
程度第一种：文本“text-align”。
长处：浏览器兼容好（是css2内容）。
错误谬误：text-align属性有担当性，导致子级元素的文本也是居中对齐。解决：.child{text-align: left;}
2
程度第二种：块“display:table”。
长处：只要对子级元素设置就可以实现
错误谬误：若是子级元素离开文档流，导致margin属性的值无效
3
程度第三种：浮动“position:absolute;”。
长处：父级元素是否离开文档流，不影响子级元素垂直居中结果
错误谬误：transform是css3中新增属性，浏览器撑持环境欠好
4
垂直第四种：表格“display: table-cell;”。
样式parent设置为： display: table-cell;vertical-align: middle;
5
垂直第五种：绝对定位“position:relative;”。
长处：父级元素是否离开文档流，不影响子级元素垂直居中结果
错误谬误：transform是css3中新增属性，浏览器撑持环境欠好