div水平垂直居中方法(前端面試必備)

2021-07-25 11:48:50 字數 659 閱讀 8646

方法1.這也是絕大多數網友使用的方法

//-----------樣式-----------------

.fa.left1

(這種方法能夠實現水平垂直居中,但樣式**太多了)方法1的公升級寫法,使用calc();(個人比較推薦的寫法!)

.left1

注意:1.calc()的表示式中運算子兩邊必須要有空格。

說明:left:calc(50% - 0.75rem)中的0.75rem是指需要水平垂直居中的div的寬或高的一半;50%是指父級容器的50%,及一半,這裡的父級容器的寬度為100%;

同理:top:calc(50% - 0.75rem)就不在說明。

方法2.

"fa2"

>

"left2"

>

//-----------樣式-----------------

.fa2

.left2

第二種方法是直接在父盒子中寫樣式

div水平垂直居中方法總匯

方法一 絕對定位方法 不確定當前div的寬度和高度,採用transform translate 50 50 當前div的父級新增相對定位 position relative children方法二 絕對定位方法 確定當前div寬度和高度嗎,margin值為當前div寬度一半的負值。children方...

div盒子水平垂直居中方法

這個問題比較老,方法比較多,各有優劣,著情使用。一 盒子沒有固定的寬和高 方案1 transforms 變形 這是最簡單的方法,不僅能實現絕對居中同樣的效果,也支援聯合可變高度方式使用。內容塊定義transform translate 50 50 必須加上 top 50 left 50 優點 1.內...

div水平垂直居中方法及優缺點

方案一 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 father son 優點 缺點 方案二 div絕對定位水平垂直居中 margin 負間距 這或許是當前最流行的使用方法。father son 優點 缺點 方案三 div絕對定位水平垂直...