css居中方法詳解

第一種居中方式：

使用margin:auto;

這應該是使用最多的居中方式了，但也有著侷限性，居中的元素需要設定寬度，而且是塊元素才行，並且只能實現水平居中，這個方法的原理是讓瀏覽器自動去計算左右邊距從而實現居中；

.big

.small

第二種居中方式：

使用text-align:center實現居中，這種居中方式對於容器內的，文字能夠很方便的實現居中。直接給父元素設定text-align:center就行；

第三種居中方式：

利用table-cell實現居中，這種方法可以實現水平垂直居中，但是需要外套一層標籤；ie8+有效

.big .big-small

.small

第四種居中方式：

使用position:absolute居中；可以實現水平垂直居中；

瀏覽器相容性好，但是必須顯式宣告外部容器元素的height;來看一下**：

.big

.small

第五種居中方式：

使用css translate居中，同樣可以實現水平垂直居中；但是使用transform需要加字首，只支援ie9+，外部容器需要設定高度，如果內容包含文字，文字可能出現模糊；

.big

.small

這種方法實現的原理是：首先讓需要居中的元素在容器內絕對定位，然後設定top:50%;left:50%;從而讓元素距離頂部為容器的一半高度，距離左邊為容器的寬度的一半，然後使用translate使元素向左向上偏移自身的寬高的一半實現居中；

第六種方式：

使用flexbox居中；給父容器設定display:flex;這種方法比較簡單，而且新版本瀏覽器都支援。

我就是要這種 .big

.small

第七種方式：

使用calc動態計算實現居中；同樣可以實現水平垂直居中

.big

.small

如果只有50%，內部元素的左上角在容器的中心，明顯不符合，所以還要讓元素向左向上移動自身的一半，從而實現居中。注意：calc(50% - 20%);當是乙個計算式的時候，減號左右需要乙個空格，否則無法識別哦；

**：