1，行內元素先看它的父元素是不是塊級元素，如果是，則直接給父元素設定 text-align: center；如果不是，則先將其父元素設定為塊級元素，再給父元素設定 text-align: center;
2，塊級元素
方案一：(分寬度定不定兩種情況)
定寬度：需要誰居中，給其設定 margin: 0 auto; （作用：使盒子自己居中）
不定寬度：預設子元素的寬度和父元素一樣，這時需要設定子元素為display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元素，給父元素設定 text-align: center;
方案二：使用定位屬性
首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的left:50%，即讓子元素的左上角水平居中；
設定絕對子元素的 margin-left: -元素寬度的一半px; 或者設定transform: translatex(-50%);
方案三：使用flex布局
使用flex布局，只需要給待處理的塊狀元素的父元素新增屬性 display: flex; justify-content: center;
1，單行的行內元素
如果是單行文字，則可以設定的line-height的數值，讓其等於父級元素的高度！
2，多行的行內元素
使用給父元素設定display:table-cell;和vertical-align: middle;屬即可
我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字3，塊級元素
方案一：使用定位
首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的top: 50%，即讓子元素的左上角垂直居中；
定高度：設定絕對子元素的 margin-top: -元素高度的一半px; 或者設定transform: translatey(-50%);
方案二：flex布局
父元素display: flex; align-items: center
方案三：table布局
使用display：table進行垂直居中！給父元素設定display：table；子元素設定為display：table-cell;
方案四：父元素偽類方法
給父元素新增偽類 子元素使用diaplay:inline-block,vertical-align:middle
偽類居中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...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...