css的元素置中詳解

水平置中

若為行內元素，對其父元素用text-align:center即可；

若為塊元素（無浮動），則一般有兩種方法可實現對其的水平置中，一為margin:0 auto;二為通過css計算函數calc；

垂直置中

若為行內元素，一般對其父元素用line-height:{height}即可，若為圖片元素則需再對該元素使用vertical-align:middle；

另由可通過對錶格元素td使用vertical-align:middle可對其內的元素進行垂直置中可知，通過對父元素使用display:table-cell;vertical-align:middle;也可實現對元素的垂直置中，且該種方法無論行內元素還是塊元素均可使用；

若為塊元素（行內元素使用這種方法最終也會變成塊元素），則可通過position等一些屬性來實現元素的垂直置中，基本步驟為：1.設定父元素position:relative;2.設定元素position:absolute;top:50%;left:50%;3.設定元素margin-top:-{height}/2;margin-left:-{width}/2;

浮動元素的置中

若為浮動的塊元素（如float:left），則需通過position等一些屬性來實現元素的水平垂直置中，基本步驟為：1.元素外層套一個p,且設定其樣式：float:left;overflow:hidden;display:inlineblock;2.將外層p position屬性設定為relative,且top、left值均為50%；3.設定元素樣式：transform:translate(-50%, -50%);

以上這篇淺談css元素置中就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援topic.alibabacloud.com。