在開發(fā)網(wǎng)站時,經(jīng)常需要將某個元素居中顯示,而使用jQuery設(shè)置元素的CSS屬性可以很方便地實現(xiàn)這個目標(biāo)。下面介紹一些常用的方法:
// 水平居中 $(selector).css({ "display": "flex", "justify-content": "center" }); // 垂直居中 $(selector).css({ "display": "flex", "align-items": "center" }); // 水平垂直居中 $(selector).css({ "display": "flex", "justify-content": "center", "align-items": "center" }); // 水平居中(使用絕對定位) $(selector).css({ "position": "absolute", "left": "50%", "transform": "translateX(-50%)" }); // 垂直居中(使用絕對定位) $(selector).css({ "position": "absolute", "top": "50%", "transform": "translateY(-50%)" }); // 水平垂直居中(使用絕對定位) $(selector).css({ "position": "absolute", "left": "50%", "top": "50%", "transform": "translate(-50%, -50%)" });
以上代碼中,selector
是要居中的元素的選擇器,可以是標(biāo)簽名、ID、類名等。使用以上方法,可以方便地實現(xiàn)元素的居中顯示。