當前位置:首頁 > 新聞中心 > 常見問題
                        純CSS完美實現垂直水平居中的6種方式責任編輯 :李飛    文章來源 :星翼創想(www.10jingt.site)    發布時間 :2016-07-31    閱讀次數:2459

                        由于HTML語言的定位問題,在網頁中實現居中也不是如word中那么簡單,尤其在內容樣式多變,內容寬高不定的情況下,要實現合理的居中也是頗考驗工程師經驗的。網上講居中的文章很多,但是都不太完整,所以小茄今天就來總結下純CSS實現居中的各種方案。學疏才淺,文中如有不當之處,萬望指出!

                        6種方案

                        1、絕對定位+margin:auto

                        <style type="text/css"> .wrp { background-color: #b9b9b9; width: 240px; height: 160px; } .box { color: white; background-color: #3e8e41; width: 200px; height: 120px; overflow: auto; } .wrp1 { position: relative; } .box1 { margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } </style> <div class="wrp wrp1"> <div class="box box1"> <h3>完全居中層1:</h3> <h3>開發工具 【 WeX5 】: 高性能輕架構、開源免費、跨端、可視化</h3> </div> </div>

                        效果:

                        實現原理:利用css定位規則,設置左右、上下方向定位為0,margin為auto,讓css根據定位計算margin值,用hack的方式實現居中。居中塊(綠色)的尺

                        寸需要可控,因為css計算margin時也需要參考尺寸值,由于四周為0,所以自動計算的尺寸是與父容器一樣的。無論是設置width、height或者是 max-

                        height、max-width,都是讓尺寸不會擴大到與父級一樣。

                        2、絕對定位+margin反向偏移

                        </style>

                        <style type="text/css">

                        .wrp2 { position: relative; } .box2 { position: absolute; top: 50%; left: 50%; margin-left: -100px; /* (width + padding)/2 */ margin-top: -75px; /* (height + padding)/2 */ }

                        </style>

                        <div class="wrp wrp2">

                        <div class="box box2"> <h3>完全居中方案二:</h3> <h3>開發工具 【 WeX5 】: 高性能輕架構、開源免費、跨端、可視化</h3> </div>

                        </div>

                        效果:

                        實現原理:由于top、left偏移了父對象的50%高度寬度,所以需要利用margin反向偏移居中塊的50%寬高。而margin中不能使用百分比,因為百分比是針對

                        父對象的,所以需要手動計算定值指定margin值。這個方案需要固定尺寸值,以此來計算margin反向偏向值,所以方案2比方案1稍差!

                        3、絕對定位+transform反向偏移

                        <style type="text/css">

                        .wrp3 { position: relative; } .box3 { margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

                        </style>

                        <div class="wrp wrp3">

                        <div class="box box3"> <h3>完全居中方案三:</h3> <h3>開發工具 【 WeX5 】: 高性能輕架構、開源免費、跨端、可視化</h3>

                        </div>

                        效果:

                        實現原理:方案3與方案2原理一樣!不同點是使用了transform來代替margin做反向偏移,由于transform的計算基準是元素本身,所以這里可以用50%來做反向偏移。這個方案也需要固定尺寸值,瀏覽器以此為基準來計算定位!

                        4、display:tabel

                        <style type="text/css">

                        .wrp4 { display: table; } .subwrp4 { display: table-cell; vertical-align: middle; } .box4 { margin: auto; overflow-wrap: break-word; height: auto; max-height: 80%; max-width: 80%; }

                        </style>

                        <div class="wrp wrp4">

                        <div class="subwrp4"> <div class="box box4"> <h3>完全居中方案四:</h3> </div> </div>

                        </div>

                        效果:

                        實現原理:方案4是實現效果比較好的,居中塊的尺寸可以做包裹性,缺點是增加了一層table-cell層來實現垂直居中。方案4的居中塊可以設置 max-

                        height、max-width,而且居中塊是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的,所以會直接顯示max-width,也就是寬度趨大。

                        5、display: inline-block

                        <style type="text/css">

                        .wrp5 { text-align: center; overflow: auto; } .box5 { display: inline-block; vertical-align: middle; width: auto; height: auto; max-width: 90%; max-height: 90%; } .wrp5:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ }

                        </style>

                        <div class="wrp wrp5">

                        <div class="box box5"> <h3>完全居中方案五:</h3> <h3>開發工具 【 WeX5 】: 高性能輕架構、開源免費、跨端、可視化</h3> </div>

                        </div>

                        效果:

                        實現原理:原理:利用inline-block的vertical-align: middle去對齊after偽元素,after偽元素的高度與父對象一樣,就實現了高度方向的對齊。方案5實現效果更加好,居中塊的尺寸可以做包裹性、自適應內容,兼容性也相當好。缺點是水平居中需要考慮inline-block間隔中的留白(代碼換行符遺留問題。)。方案4的居中塊可以設置 max-height、max-width,而且居中塊是可以具有水平垂直兩個方向的自適應。

                        6、display: flex-box

                        <style type="text/css">

                        .wrp6 { display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .box6 { width: auto; height: auto; max-width: 90%; max-height: 90%; }

                        </style>

                        <div class="wrp wrp6">

                        <div class="box box6"> <h3>完全居中方案六:</h3> <h3>開發工具 【 WeX5 】: 高性能輕架構、開源免費、跨端、可視化</h3> </div>

                        </div>

                        效果:

                        實現原理: flexbox布局。此乃布局終極大法,專治各種布局定位難題!優點:能解決各種排列布局問題,實現方式符合人類認知。缺點:PC端某些舊瀏覽器支持度不高。


                        文章轉載請保留網址:http://www.10jingt.site/news/faq/1730.html

                        我看逼