絕對定位法
- 父層設定
position: relative - 子層設定
position: absolute; top: 50%; left:50%; - 由於上述設定不會計算到子層自己的寬與高，產生了偏移
因此，再另外設定transform: translate(-50%, -50%)補正子層寬高偏移
.outer
.inner
.outer
width: 300px
height: 200px
border: 1px solid
position: relative
.inner
width: 80px
height: 80px
background-color: skyblue
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
flexbox法
- 父層設定
display: flex - 水平置中：
justify-content: center - 垂直置中：
align-items: center
※以上忽略flex-direction等因素
.outer
width: 300px
height: 200px
border: 1px solid
display: flex
justify-content: center
align-items: center
.inner
width: 80px
height: 80px
background-color: skyblue
text-align與line-height
- 水平置中：
text-align: center - 當父層高度為
○○px、子層高度為△△px時
垂直置中：line-height: ○○-(△△/2)px
※此法適用於：子層沒有2行以上的文字內容
.outer
width: 300px
height: 200px
border: 1px solid
text-align: center
line-height: 260px
.inner
width: 80px
height: 80px
background-color: skyblue
display: inline-block
table-cell法
- 父層設定
display: table-cell - 水平置中：
text-align: center - 垂直置中：
vertical-align: middle
.outer
width: 300px
height: 200px
border: 1px solid
display: table-cell
vertical-align: middle
text-align: center
.inner
width: 80px
height: 80px
background-color: skyblue
display: inline-block