ooltip提示效果經(jīng)常會使用到，會運用到的場景是一些信息提示標識網(wǎng)頁中。

具體效果：

實現(xiàn)代碼

html:

title的值就是彈出層的內(nèi)容！

css:

直以來，讓前端工程師頭疼的問題肯定包括垂直居中這個問題吧，什么文字垂直居中，圖片垂直居中之類的，很頭疼對不對，如果現(xiàn)在讓你寫一個在網(wǎng)頁正中間顯示的彈出層，你會用什么方法寫呢？

今天來分享一下小編所知道的幾種方法，希望能對大家有用，如果你有更好的解決方法，也歡迎你來告訴我，讓小編也漲漲姿勢哈。

第一種：固定寬高的彈出層

運行效果

css樣式

html代碼

這里大家看下我用紅色框框框起來的那幾行代碼哈，其它的只是附加的一些效果。

優(yōu)點：適用于各種瀏覽器，包括令前端工程師頭疼的ie6。

缺點：必須要設(shè)置彈出層的寬高。

第二種：自適應(yīng)內(nèi)容寬高的彈出層

運行效果

css樣式

html代碼

還是只看我用紅色框框框起來的那幾行代碼。

優(yōu)點：不用設(shè)置彈出層寬高，彈出層的寬高隨內(nèi)容自適應(yīng)居中。

缺點：只適用于ie10或以上版本及webkit內(nèi)核的瀏覽器（像現(xiàn)在主流的雙核瀏覽器在高速模式下都可以的）。。

如果要兼容其它內(nèi)核瀏覽器（比如火狐），就改成這樣：

以上就是小編常用的兩種彈出層在正中間顯示的方法，那么，你是用什么方法實現(xiàn)的呢？歡迎一起交流哦。

謝謝你的閱讀，如果你有更好的方法或在應(yīng)用過程中遇到問題可以在評論區(qū)提問或者直接私信我，我會定期回復(fù)，碼農(nóng)劉小橋與你一起學(xué)習(xí)，共同進步。