前端布局的時(shí)候總是會遇到一些需要居中的方案,下面是我平常使用的一些方法,當(dāng)然還有很多的方法也能居中顯示。
1、寬高固定 – 使用絕對定位居中顯示
這兒一般是用在固定的大小的box中使用,如果相對定位的box大于屏幕不建議使用。
代碼如下:
2、寬高固定 – 使用固定定位居中顯示
固定定位主要是一些彈出層使用比較好,而且在所有的高度的文檔中都可以使用。
代碼如下:
3、寬高不固定 – 屏幕中間 – 使用jq來計(jì)算
有些時(shí)候咱們會遇到高度和寬度不固定的box需要居中的需求,這時(shí)候咱們可以使用js來計(jì)算box的寬高然后在控制他的margin來居中。
代碼如下:
4、不固定寬高 – CSS上下左右居中 – IE7及以上
當(dāng)然使用純CSS也是可以辦得到的,這個(gè)有個(gè)前提條件最外層的box必須有高度,然后可以使用display: table;來居中,如果你不想兼容低版本瀏覽器的話可以使用這個(gè)方法,當(dāng)然這個(gè)方法親測可以支持到IE7。
代碼如下:
不固定寬高 - CSS上下左右居中 - IE7及以上
不固定寬高 - CSS上下左右居中 - IE7及以上
不固定寬高 - CSS上下左右居中 - IE7及以上
不固定寬高 - CSS上下左右居中 - IE7及以上
不固定寬高 - CSS上下左右居中 - IE7及以上
5、上下左右定位法 – CSS上下左右居中 – IE7及以上
其實(shí)這個(gè)方法是我偶然發(fā)現(xiàn)的,當(dāng)初還真是被驚到了
代碼如下:
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。