1、絕對定位+margin：auto
type="text/css">
.wrp
.box
.wrp1
.box1
style>
class="wrp wrp1">
class="box box1">
完全居中層1：h3>
開發工具 【 wex5 】： 高效能輕架構、開源免費、跨端、視覺化h3>
div>
div>
實現原理：利用css定位規則，設定左右、上下方向定位為0，margin為auto，讓css根據定位計算margin值，用hack的方式實現居中。
居中塊（綠色）的尺寸需要可控,因為css計算margin時也需要參考尺寸值，由於四周為0，所以自動計算的尺寸是與父容器一樣的。
無論是設定width、height或者是 max-height、max-width，都是讓尺寸不會擴大到與父級一樣。
style>
type="text/css">
.wrp2
.box2
style>
class="wrp wrp2">
class="box box2">
完全居中方案二：h3>
開發工具 【 wex5 】： 高效能輕架構、開源免費、跨端、視覺化h3>
div>
div>
實現原理：由於top、left偏移了父物件的50%高度寬度，所以需要利用margin反向偏移居中塊的50%寬高。
而margin中不能使用百分比，因為百分比是針對父物件的，所以需要手動計算定值指定margin值。
這個方案需要固定尺寸值，以此來計算margin反向偏向值，所以方案2比方案1稍差！
type="text/css">
.wrp3
.box3
style>
class="wrp wrp3">
class="box box3">
完全居中方案三：h3>
開發工具 【 wex5 】： 高效能輕架構、開源免費、跨端、視覺化h3>
div>
實現原理：
方案3與方案2原理一樣！不同點是使用了transform來代替margin做反向偏移，由於transform的計算基準是元素本身，所以這裡可以用50%來做反向偏移。
這個方案也需要固定尺寸值，瀏覽器以此為基準來計算定位！
type="text/css">
.wrp4
.subwrp4
.box4
style>
class="wrp wrp4">
class="subwrp4">
class="box box4">
完全居中方案四：h3>
div>
div>
div>
實現原理：
方案4是實現效果比較好的，居中塊的尺寸可以做包裹性，缺點是增加了一層table-cell層來實現垂直居中。
方案4的居中塊可以設定 max-height、max-width，而且居中塊是可以具有垂直方向的包裹性的。
水平方向由於是在table-cell裡面的，所以會直接顯示max-width，也就是寬度趨大。
type="text/css">
.wrp5
.box5
.wrp5
:after
style>
class="wrp wrp5">
class="box box5">
完全居中方案五：h3>
開發工具 【 wex5 】： 高效能輕架構、開源免費、跨端、視覺化h3>
div>
div>
實現原理：
利用inline-block的vertical-align: middle去對齊after偽元素，after偽元素的高度與父物件一樣，就實現了高度方向的對齊。
方案5實現效果更加好，居中塊的尺寸可以做包裹性、自適應內容，相容性也相當好。
缺點是水平居中需要考慮inline-block間隔中的留白（**換行符遺留問題。）。
方案4的居中塊可以設定 max-height、max-width，而且居中塊是可以具有水平垂直兩個方向的自適應。
type="text/css">
.wrp6
.box6
style>
class="wrp wrp6">
class="box box6">
完全居中方案六：h3>
開發工具 【 wex5 】： 高效能輕架構、開源免費、跨端、視覺化h3>
div>
div>
實現原理：
flexbox布局。此乃布局終極**，專治各種布局定位難題！
優點：能解決各種排列布局問題，實現方式符合人類認知。
缺點：pc端某些舊瀏覽器支援度不高。
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
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...