2021前端學習筆記-第一章第二節-div水平垂直居中的方法

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

方法一:

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

　　圖片展示：

　　程式碼如下：

div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); }

　

方法二:

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

　　圖片展示： 如方法一的圖片展示

　　程式碼如下：

div{ width:600px; height: 600px; background:red; position: absolute; left:50%; top:50%; margin-left:-300px; margin-top:-300px; }

　　

方法三：

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

　　圖片展示： 如方法一的圖片展示

　　程式碼如下：

css div.child{ width: 600px; height: 600px; background: red; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }

　　

方法四:

　　flex佈局方法：當前div的父級新增flex css樣式

展示圖如下：

　　程式碼如下：

.box{ height:800px; -webkit-display:flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; border:1px solid #ccc; } div.child{ width:600px; height:600px; background-color:red; }

　　

方法五:

　　table-cell實現水平垂直居中: table-cell middle center組合使用

展示圖如下：

程式碼如下：

.table-cell { display: table-cell; vertical-align: middle; text-align: center; width: 240px; height: 180px; border:1px solid #666; }

　　

方法六:

　　絕對定位：calc() 函式動態計算實現水平垂直居中

　　展示圖如下：

　　程式碼如下：

.calc{ position: relative; border: 1px solid #ccc; width: 400px; height: 160px; } .calc .child{ position: absolute; width: 200px; height: 50px; left:-webkit-calc((400px - 200px)/2); top:-webkit-calc((160px - 50px)/2); left:-moz-calc((400px - 200px)/2); top:-moz-calc((160px - 50px)/2); left:calc((400px - 200px)/2); top:calc((160px - 50px)/2); }　　

body設定flex

body { display: flex; justify-content: center; align-items: center; }