今天在專案中需要用到類似element-ui中的message-box的彈窗功能，但是由於是原有專案的重構，element-ui的樣式不同，不能直接使用，然後就自己手動實現乙個遮罩彈框。檢視了下element的原始碼，發現他們實現垂直水平居中的方式很好。就發出來大家一起學習。
實現：
1、外部乙個容器div，類名為content吧，容器充滿全屏，這是乙個遮罩。text-align: center;
2、給content新增乙個after偽類，這個偽類的display為inline-block。高度100%。寬度為0。設定vertical-align: middle
3、新建展示框div,類名為showpanel。然後同樣display為inline-block，vertical-align: middle，這樣即可實現垂直居中
直接上**了。
如何正確使用css中vertical align
首先明確，vertical align只對inline block和inline元素有效。在說vertical align之前，需要先說明一下什麼是line box。瀏覽器中顯示的一行會包含多個非block元素 有block元素時就換行了 通過乙個box可以把這一行包含起來，這就是乙個line bo...
利用CSS控制列印
放在這裡，算是乙個備份 每頁都有的表頭 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 每頁都有...
利用CSS控制列印
利用css控制列印 放在這裡，算是乙個備份 每頁都有的表頭 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 內容 ...