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中新增屬性，瀏覽器撐持環境欠好