水平居中 若為行內元素,對其父元素用text-align:center即可; 若為塊元素(無浮動),則一般有兩種方法可實現對其的水平居中,一為margin:0 auto;二為通過css計算函數calc; 垂直居中 若為行內元素,一般對其父元素用line-height:{height}即可,若為圖片元 ...
水平居中
若為行內元素,對其父元素用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.元素外層套一個div,且設置其樣式:float:left;overflow:hidden;display:inlineblock;2.將外層div position屬性設置為relative,且top、left值均為50%;3.設置元素樣式:transform:translate(-50%, -50%);