CSS之各種居中

本部落格討論居中情況設定為總寬度不定,內容寬度不定的情況。（改變大小時，仍然居中）。

特別說明：在元素設定position:absolute;來設定居中效果時，除去部落格下介紹的css3方法外，還可以使用負的margin來居中，這樣解決了相容性的問題，但是只適用於寬高已知的情況（因為負的偏移量為元素寬高的一半）。寬高改變時，不再是居中效果。

在這些布局中的子元素，因為其屬性設定，都預設為內容寬度。

本部落格所有居中的例子，只討論css的實現，html**統一如下：


demodiv> div> 
.parent .child

優點：相容性非常好，只需要新增只需要在子元素的css中新增*display:inline和*zoom:1就可相容到ie6、7；缺點：內部文字也會水平居中，需消除影響。

.child

優點：設定特別簡單，只需對子元素進行設定，支援ie8+，需支援ie6，7時，可更換子元素為**結構。

.parent .child

優點：居中元素不對其他元素產生影響。缺點：css3新屬性支援ie9+，低版本瀏覽器不支援。

.parent

優點：設定簡單，只需對父元素進行設定，相容到ie8+，需相容地版本瀏覽器時，可更換div為**結構。

.parent .child

優點：居中元素不對其他元素產生影響。缺點：css3新屬性支援ie9+，低版本瀏覽器不支援。

.parent .child

優點：綜合前兩中方法，相容性好！支援ie8+，低版本瀏覽器也好相容。缺點：設定較為複雜。

.parent .child

優點：居中元素不對其他元素產生影響。缺點：css3新屬性支援ie9+，低版本瀏覽器不支援。

css3新增布局屬性，布局簡單，強大，效能略差，只支援ie10+，在移動端使用較多。

/*當父元素設定display: flex;時，子元素為flex-item，預設為內容寬度。*/ .parent /* 在設定子元素為margin: 0 auto;時，可刪除父元素的justify-content: center;同樣可以達到居中效果*/ /* .child*/

.parent

.parent /*如同flex布局的第一部分一樣這裡也可以對子元素進行下面的設定：同時刪除上面的除去display外的其他屬性*/ /* .child */