純CSS實現垂直居中

2021-08-21 18:13:03 字數 1251 閱讀 1661

**：

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

html結構：

垂直居中
方法1：table-cell

.box1
方法2：display:flex

.box1
方法3：絕對定位和負邊距

.box1


.box1 span
方法4：絕對定位和0

.box1 span
這種方法跟上面的有些類似，但是這裡是通過margin:auto和top,left,right,bottom都設定為0實現居中，很神奇吧。不過這裡得確定內部元素的高度，可以用百分比，比較適合移動端。

方法5：translate

.box1 span
這實際上是方法3的變形，移位是通過translate來實現的。

方法6：display:inline-block

.box1


.box1 span


.box1:after
這種方法確實巧妙...通過:after來佔位。

方法7：display:flex和margin:auto

.box1


.box1 span
方法8：display:-webkit-box

.box1
方法9：display:-webkit-box

這種方法，在 content 元素外插入乙個 div。設定此 divheight:50%; margin-bottom:-contentheight;。

content 清除浮動，並顯示在中間。



content here 


.floater 


.content

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

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

純css實現垂直居中的方法

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

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

乙個垂直居中的思路，不止限於模態框 用bootstrap模態框時，常見的幾種垂直居中方法是 1.在開啟時用js計算 model on shown.bs.modal function e 但這種有個缺陷，如果模態框裡內容改變時，模態框大小也會跟著變，此時就無法垂直居中了。2.利用translate 5...