//結構
.parent
.child
block：塊級元素
inline：內聯元素（text-align有效）width,height無效（文字稱開）
inline-block ：行內塊級元素（塊+內）注意：width,height有效
//結構
.child
會導致脫離文件流：浮動float，設定絕對定位，固定定位
//結構
.parent
.child
//結構
.parent
優點：相容性好（是屬於css2的內容，所以對低版本瀏覽器友好）缺點：
vertical-align屬性具有繼承性，導致父級元素的文字也是居中顯示
//結構
.parent
.child
//結構
.parent
.child
//結構
.parent
.child
水平居中(文字搭配)
.parent: text-align:center
.child: display:inline-block
水平居中（margin自動搭配）
child ： display: table;
margin: 0 auto;
垂直居中：（**----單元格搭配）
parent: display: table-cell;
vertical-align: middle
絕對定位（單獨）第一種 --------垂直水平
parent ： position: relative;
child ： position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
定位（單度）第二種 --------垂直水平
parent ： position: relative;
child: position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
彈性布局（flex單獨） --------垂直水平
parent: display: flex;
justify-content: center;
align-items: center;
CSS 水平居中和垂直居中的多種實現方法
後面的所有例子，都分為 3 層巢狀 父元素，子元素，內容。其中父子元素都是塊級元素 div。父元素設定屬性display flex justify content center align items center 父元素設定屬性display flex 子元素設定屬性margin auto 父元素...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...