行內元素的水平居中
text-align:center（在父元素中設定）
塊級元素的水平居中
margin: 0 auto;行內元素的垂直居中
line-height: 父元素的高度;（在父元素中設定）
vertical-align: middle;（用於垂直對齊inline元素）
例如將乙個icon與文字對齊。
浮動元素
使用position:relative;
具體方法與絕對定位的第1個和第2個方法類似，只不過把absolute改為relative，並根據原float的方向稍作修改即可。
絕對定位元素
使用50%推進法則
position: absolute;
left: 50%;
top: 50%;
margin-left: -該元素自身寬度的一半px; /*水平居中*/
margin-top: -該元素自身高度的一半px; /*垂直居中*/
第一種方法的改進版，使用transform代替margin
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /*水平垂直居中*/
使用margin:auto;
position: absolute;
left: 0;
right: 0; /*水平居中*/
top: 0;
bottom: 0; /*垂直居中*/
margin: auto;
flex居中方式
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
居中的問題
（注意: 父元素必須設定text-align: center;）
CSS水平和垂直居中技巧大梳理
水平居中 行內元素的水平居中 text align center 在父元素中設定 只對內聯元素或行內塊元素有效 需要放置于父元素中 塊級元素的水平居中 margin 0 auto 只對塊級元素有效 auto指的是自適應寬度。實質就是均分了元素左右的剩餘空間，所以元素會居中。auto只有在塊級元素設定...
CSS水平和垂直居中
parent.son.parent son.parent1 transform 絕對定位，left50 向左平移 50 son2 margin left 絕對定位，left50 margin left 0.5 子元素寬度 注 此方法必須知道子元素寬度 son3 left right 0 son.pa...
CSS詳解水平和垂直居中
text align center margin 0 auto 設定父元素flex布局 display flex justify content center 1.子元素使用相同內邊距撐開父元素 padding top 30px padding bottom 30px 2.使高度和行高相等 字元本來...