一、加padding減height：
垂直水平居中方法一：
padding-top:（box2高度-box1高度）/ 2
height: 原height值 - padding-top值
box2：margin: 0 auto （脫離標準流的盒子該屬性值失效）
優缺點：
要先知道盒子的寬高，居中盒子不能脫離標準流
二、子絕父相：
垂直水平居中方法二：
box1 positon: realtive && box2 position: absolute
box2: top: 50% , margin-top: -(height/2)
box2: left: 50% , margin-left: -(width/2)
優缺點：
要先知道盒子的寬高注：
box2盒子直接使用 position: relative 或 positon: absolute
left: top: 或 right: bottom:
box2盒子有border屬性時，margin-top與margin-left要減去border的寬
三、margin: auto：
垂直水平居中方法三：
box1 positon: realtive && box2 position: absolute
box2盒子 top、left、bottom、right值都設為0
box2盒子 新增 margin: auto
box2盒子有border屬性時，不影響水平垂直居中
優缺點：
可以不需要知道盒子的寬高就能居中
盒子需脫離標準流（positon: absolute），margin: auto垂直方向居中才有效
四、transform: translate(-50%, -50%)：
垂直水平居中方法四：
box1 positon: realtive && box2 position: absolute
box2: top: 50%；left: 50%
box2盒子使用 css3屬性 transform: translate(-50%, -50%)代替margin實現偏移量，偏移量根據自身盒子寬高用百分比進行寬高偏移
box2盒子有border屬性時，不影響水平垂直居中
優缺點：
可以不需要知道盒子的寬高就能居中
暫無發現居中屬性值失效問題
五、display:table-cell：
優缺點：box1浮動，display: table-cell失效（垂直方向）
box2浮動，margin: 0 auto失效（水平方向）
塊級 行內元素水平垂直居中方法
塊級元素水平垂直居中 為目標元素設定以下屬性 position absolute top 0 left 0 right 0 bottom 0 margin auto 行內元素水平垂直居中 在目標元素的父元素設定以下屬性 目標父元素內內容水平對齊方式 text align center 此元素會作為乙...
塊元素水平垂直居中方法彙總
無論在平時專案中還是在面試中，遇到塊元素水平垂直居中的需求比較多。在此做下彙總 一 塊元素寬高固定 方法1 最普通常用方法 target 方法2 利用盒模型特性，當absolute定位元素偏移 top lelft right bottom 與其他屬性衝突時，則忽略偏移以其他屬性值為準。target ...
元素水平垂直居中方法集錦
小tip margin auto實現絕對定位元素的水平垂直居中 如何只用css做到完全居中 element好處 不足 elementtransform中translate偏移的百分比值是相對於自身大小的。於是乎，無論絕對定位元素的尺寸是多少，其都是水平垂直居中顯示的。好處 不足 element上面 ...