方法一:
絕對定位方法：不確定當前div的寬度和高度，採用transform: translate(-50%,-50%); 當前div的父級新增相對定位（position: relative;）
**如下：
div
方法二:
絕對定位方法：確定了當前div的寬度，margin值為當前div寬度一半的負值
**如下：
div
方法三：
絕對定位方法：絕對定位下top left right bottom 都設定0
**如下：
112
3456
78910
1112
13<divclass="child">我是子級
/**css**/
div.child
方法四:
flex布局方法：當前div的父級新增flex css樣式
展示圖如下：
**如下：
<divclass="box">
<divclass="child">child
/**css**/
.box
div.child
方法五:
table-cell實現水平垂直居中: table-cell middle center組合使用
展示圖如下：
**如下：
<divclass="table-cell">
<p>我愛你
/**css**/
.table-cell
方法六:
絕對定位：calc() 函式動態計算實現水平垂直居中
展示圖如下：
**如下：12
3456
78910
1112
1314
1516
17
<divclass="calc">
<divclass="child">calc
/**css**/
.calc
.calc .child
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
css垂直水平居中方法
1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...