水平居中分為塊狀元素和行內元素，而塊狀元素又分為定寬塊狀元素和不定寬塊狀元素。
行內元素水平居中
定寬塊狀元素水平居中
1) 改變塊狀元素的 dispaly 屬性為 inline， 然後給父級設定 text-aline：center 來實現水平居中， 這種方法的缺點是不能再給元素設定寬高了
不定寬塊狀元素水平居中
不定寬塊狀元素水平居中
不定寬塊狀元素水平居中
不定寬塊狀元素水平居中
2.margin:0 auto水平居中以外邊框為參照物，上下外邊框距為0，左右外邊框距瀏覽器會自動計算平分
3.line-height垂直居中通過設定行間距。line-height只適用於單行文字的元素，多行元素不適用。
4.float屬性+relative定位給父元素設定float：left ,然後父元素整體向左移動50%（position:relative;left:50%），這時父元素要清除浮動（clear：both）,然後再給子元素整體向左移動50%(position:relative;left:-50%)
5.根據絕對定位absolute+margin實現水平居中給父元素乙個相對定位relative，利用絕對定位absolute，配合margin：auto自動計算外邊距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相對於相對應於relative的絕對定位absolute，需要定寬。relative只是為了給子元素定位用的
6.使用absolute絕對定位+translate 移動轉換，實現水平垂直居中使用百分比來絕對定位乙個元素，並配合使用translate，將元素移動定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。
7.利用table布局，預設垂直居中（vertical-align:middle）如果不是table布局的話可以：仿table（display：table-cell）,一樣使用vertical-align:middle實現居中對齊
8.flex布局父元素使用display：flex,設定其屬性justify-content.align-items都為center(display: flex; justify-content: center; align-items: center),實現水平居中
9.flex布局+margin父元素使用flex布局（display：flex）,子元素使用margin：auto
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
CSS水平居中和垂直居中的實現方式
方案二 使用定位屬性，首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的 left 50 即讓子元素的左上角水平居中 方案三 使用flexbox布局實現 方案二 使用flexbox布局，只需要給待處理的塊級元素的父元素新增屬性 display flex align items cente...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...