1. 行內元素
語法：text-align:center
使用範圍：inline、inline-block、inline-table、inline-flex
2. 塊級元素
margin: 0 auto;（必須要有寬度）
display:table; + margin: 0 auto;（寬度是內容的寬度）
position: absolute + transform:translate();（相容性不強）
display:flex; + justify-content:center;
3. 多塊級元素
display:flex; + justify-content:center;
inline-block
浮動絕對定位
1 .單行內聯元素
line-height和height設定一樣高
2 .多行內聯元素
flex-direction:column;（相容性不強）
**的vertical-align:middle;
3 .塊級元素
position: absolute + transform:translate();（相容性不強）
position: absolute + 負margin;（已知高度）
flex布局中的align-items
display:table-cell; + vertical-align:middle;
絕對定位與負邊距實現（已知高度）
絕對定位 + margin:auto（已知高度）
絕對定位 + transform:translate();
flex布局中的align-items和 justify-content:center;
display: inline-block;（兩個一起）+ vertical-align: middle;
浮動（一起浮動）
定位把設定為背景，利用背景定位
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.使高度和行高相等 字元本來...
使元素水平和垂直居中
一 對行級元素水平垂直居中 text align center heiht與line height的值一樣 二 對塊級元素垂直居中對齊 1 flex布局 parent 2 父元素高度固定 2.1 position 子元素已知寬度 父元素設定為 position relative 子元素設定為 pos...