純css實現模態框動態垂直居中

2021-08-25 05:59:51 字數 853 閱讀 7525

乙個垂直居中的思路，不止限於模態框

用bootstrap模態框時，常見的幾種垂直居中方法是：

1.在開啟時用js計算

$(


'#model').on('shown.bs.modal', function (e) );


});
但這種有個缺陷，如果模態框裡內容改變時，模態框大小也會跟著變，此時就無法垂直居中了。

2.利用translate:50%是指自身高度50%

.modal-dialog
用css實現的好處就是可以動態垂直居中，但這又出現了其他問題，如果模態框高度大於瀏覽器時，上部分無法顯示，並且高度是奇數時，模態框中的文字會糊。

3.完美解決方案

.modal


.modal:after 


.modal-dialog
我們知道vertical-align:middle;的居中是基於line-height的，但line-height:100%;是

相對於字型尺寸的，這就尷尬了。。。

這方法通過在要居中的物件後面加乙個高度100%的:after偽類，兩者都display:inline-block;vertical-align:middle;

也就相當於要居中的物件要和乙個高度100%的物件中線對齊，

而:after物件因為沒有寬度，所以不占用空間，從達到了垂直居中的目的。

純CSS實現垂直居中

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。html結構 垂直居中 方法1 table cell box1方法2 display flex box1方法3 絕對...

純css實現元素水平垂直居中

在前端頁面布局的時候，我們需要對某個元素進行相對於其父元素或整個文件進行水平垂直居中的顯示布局。而如何快速的運用css進行相對於的布局，這裡，總結了三種方法。這裡父元素只需要給它乙個定位的屬性就行，在子元素下設定相對定位，這裡有兩種寫法，第一種就是沒有注釋的，把left，right，top，bott...

純css實現垂直居中的方法

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化 在面試中也是經常問到的考點，現在我們一起來複習一下這些垂直居中的方法 parent child 我是內容 複製 此方...