div絕對居中的六種方法

2021-10-02 07:32:51 字數 983 閱讀 2389

在平時，我們經常會碰到讓乙個div框針對某個模組上下左右都居中（水平垂直居中），其實針對這種情況，我們有多種方法實現。

方法一:絕對定位方法：不確定當前div的寬度和高度，採用 transform: translate(-50%,-50%); 當前div的父級新增相對定位（position: relative;）

div
方法二:絕對定位方法：確定了當前div的寬度，margin值為當前div寬度一半的負值

div
方法三：絕對定位方法：絕對定位下top left right bottom 都設定0

**如下：

="child"


>我是子級<


/div>


div.child
方法四:flex布局方法：當前div的父級新增flex css樣式

**如下：

="box"


>


="child"


>child<


/div>


<


/div>


.box


div.child
方法五:table-cell實現水平垂直居中: table-cell middle center組合使用

**如下：

="table-cell"


>


我愛你<


/p>


<


/div>


.table-cell
方法六:絕對定位：calc() 函式動態計算實現水平垂直居中

**如下：

="calc"


>


="child"


>calc<


/div>


<


/div>


.calc


.calc .child

div水平垂直居中的六種方法

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

居中的六種方法

居中效果在css中很是普通的效果，平時大家所看到的居中效果主要分為三大類 水平居中 垂直居中和水平垂直居中。而其中水平居中相對於後兩者來說要簡單得多。早期總結了一下網際網路上有關於水平垂直居中的幾種實現方案，比如說 css製作水平垂直居中對齊 中介紹了八中實現水平垂直的方案，而在 css製作水平垂直...

陣列遍歷六種方法

foreach some every map filter reducer var arr 1,2,3,4 arr.foreach item,index,arr foreach遍歷陣列，無返回值，不改變原陣列，僅僅只是遍歷 常用於註冊元件 指令等等。var arr 1,2,3,4 arr.some ...