在平時,我們經常會碰到讓乙個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 ...