無論在平時專案中還是在面試中，遇到塊元素水平垂直居中的需求比較多。在此做下彙總：
一、塊元素寬高固定
方法1、最普通常用方法
#target方法2、利用盒模型特性，當absolute定位元素偏移（top/lelft/right/bottom）與其他屬性衝突時，則忽略偏移以其他屬性值為準。
#target方法3、利用css3屬性calc，相容不好
#target方法1、利用transform:translate(-50%,-50%)，translate位移為百分比時是相對於元素自身的位移，而不是相對於包含塊。注意加上各瀏覽器字首以保持各瀏覽器相容。
#target方法2、彈性框布局，彈性框元素可以使子元素在其中垂直居中對齊（控制目標元素的父元素，使目標元素在父元素中居中）。display:flex是新版彈性框屬性，舊版瀏覽器不識別，結合舊版屬性display:box實現跨瀏覽器相容。
#target-patent塊級元素水平垂直居中方法
一 加padding減height 垂直水平居中方法一 padding top box2高度 box1高度 2 height 原height值 padding top值 box2 margin 0 auto 脫離標準流的盒子該屬性值失效 優缺點 要先知道盒子的寬高，居中盒子不能脫離標準流 二 子絕父...
塊級 行內元素水平垂直居中方法
塊級元素水平垂直居中 為目標元素設定以下屬性 position absolute top 0 left 0 right 0 bottom 0 margin auto 行內元素水平垂直居中 在目標元素的父元素設定以下屬性 目標父元素內內容水平對齊方式 text align center 此元素會作為乙...
元素水平垂直居中方法集錦
小tip margin auto實現絕對定位元素的水平垂直居中 如何只用css做到完全居中 element好處 不足 elementtransform中translate偏移的百分比值是相對於自身大小的。於是乎，無論絕對定位元素的尺寸是多少，其都是水平垂直居中顯示的。好處 不足 element上面 ...