CSS各種居中布局方法匯總
我要評論本篇文章討論居中情況設(shè)定為總寬度不定,內(nèi)容寬度不定的情況。（改變大小時，仍然居中）。
特別說明：在元素設(shè)置position:absolute;來設(shè)置居中效果時，除去博客下介紹的css3方法外，還可以使用負的margin來居中，這樣解決了兼容性的問題，但是只適用于寬高已知的情況（因為負的偏移量為元素寬高的一半）。寬高改變時，不再是居中效果。
在這些布局中的子元素，因為其屬性設(shè)置，都默認為內(nèi)容寬度。
本文所有居中的例子，只討論css的實現(xiàn)，html代碼統(tǒng)一如下：
- <div class="parent">
- <div class="child">demo</div>
- </div>
1. 水平居中
1.1 inline-block配合text-align
- .parent{
- text-align: center;
- }
- .child{
- display: inline-block;
- }
優(yōu)點：兼容性非常好，只需要添加只需要在子元素的css中添加*display:inline和*zoom:1就可兼容到IE6、7；缺點：內(nèi)部文字也會水平居中，需消除影響。
1.2 table配合margin
- .child{
- display:table;
- margin: 0 auto;
- }
優(yōu)點：設(shè)置特別簡單，只需對子元素進行設(shè)置，支持IE8+，需支持IE6，7時，可更換子元素為表格結(jié)構(gòu)。
1.3 abasolute配合transform
- .parent{
- position:relative;
- }
- .child{
- position:absolute;
- left:50%;
- transform: translateX(-50%);
- }
優(yōu)點：居中元素不對其他元素產(chǎn)生影響。缺點：CSS3新屬性支持IE9+，低版本瀏覽器不支持。
2. 垂直居中
2.1 table-cell配合vertical-align
- .parent{
- display: table-cell;
- vertical-align:middle;
- }
優(yōu)點：設(shè)置簡單，只需對父元素進行設(shè)置，兼容到IE8+，需兼容地版本瀏覽器時，可更換div為表格結(jié)構(gòu)。
2.2 absolute配合tranform
- .parent{
- position:relative;
- }
- .child{
- position:absolute;
- top: 50%;
- transform: translateY(-50%);
- }
優(yōu)點：居中元素不對其他元素產(chǎn)生影響。缺點：CSS3新屬性支持IE9+，低版本瀏覽器不支持。
3. 水平+垂直居中
3.1 inline-block配合text-align加上table-cell配合vertical-align
- .parent{
- display: table-cell;
- vertical-align:middle;
- text-align:center;
- }
- .child{
- display: inline-block;
- }
優(yōu)點：綜合前兩中方法，兼容性好！支持IE8+，低版本瀏覽器也好兼容。缺點：設(shè)置較為復(fù)雜。
3.2 absolute配合transform
- .parent{
- position: relative;
- }
- .child{
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%,-50%);
- }
優(yōu)點：居中元素不對其他元素產(chǎn)生影響。缺點：CSS3新屬性支持IE9+，低版本瀏覽器不支持。
4. 全能的flex
css3新增布局屬性，布局簡單，強大，性能略差，只支持IE10+，在移動端使用較多。
4.1 水平居中
- /*當父元素設(shè)置display: flex;時，子元素為flex-item，默認為內(nèi)容寬度。*/
- .parent{
- display: flex;
- justify-content: center;
- }
- /* 在設(shè)置子元素為margin: 0 auto;時，可刪除父元素的justify-content: center;同樣可以達到居中效果*/
- /* .child{
- margin: 0 auto;
- }*/
4.2 垂直居中
- .parent{
- display: flex;
- align-items: center;
- }
4.3 水平垂直居中
- parent{
- display: flex;
- justify-content: center;
- align-items: center;
- }
- /*如同flex布局的第一部分一樣這里也可以對子元素進行下面的設(shè)置：同時刪除上面的除去display外的其他屬性*/
- /* .child{
- margin:auto;
- } */
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
- 這篇文章主要介紹了CSS元素居中布局的簡單方法,文中介紹了內(nèi)嵌元素和塊元素以及行內(nèi)塊三種情況,需要的朋友可以參考下2015-07-18
DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁面里，讓布局、背景圖片、文字內(nèi)容居中的方法，從布局內(nèi)容到頁面里文章文字居中都是非常重要的，而css來設(shè)置居中也是非常簡單的2014-10-09- 這篇文章主要收羅了CSS布局中有關(guān)水平和垂直居中的N種方法，個人感覺是相當不錯，需要的朋友可以參考下2014-05-08
CSS垂直居中網(wǎng)頁布局實現(xiàn)的5種方法
網(wǎng)頁制作Webjx文章簡介：利用 CSS 來實現(xiàn)對象的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎么來創(chuàng)建一個好的居中網(wǎng)站。2009-04-02CSS實現(xiàn)網(wǎng)頁分欄布局的方法：絕對定位和浮動
網(wǎng)頁制作Webjx文章簡介：在CSS中，實現(xiàn)分欄布局有兩種方法。第一種方法是使用四種CSS定位選項（absolute 、static、relative和fixed）中的絕對定位（absolute positioning2009-04-02基本的頁面設(shè)計元素布局比例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
基本的頁面設(shè)計元素布局比例，給大家做個參考 標志圖案： 位置 統(tǒng)計結(jié)果2008-10-17網(wǎng)頁布局 CSS簡單實現(xiàn)垂直居中-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文譯文： http://www.12sui.cn/blog/71.html 本人英語還沒過四級，所以不2008-10-17CSS網(wǎng)頁布局：div垂直居中的各種方法-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
在前面的文章中我簡單總結(jié)了一個“CSS在頁面布局中實現(xiàn)div水平居中的方法”，其實水平居中實現(xiàn)還是比較簡單的，反而垂直居中有點麻煩，因為我們設(shè)計頁面的時候往2008-10-17CSS網(wǎng)頁布局：div水平居中的各種方法-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
在Web標準中的頁面布局是使用Div配合CSS來實現(xiàn)的。這其中最常用到的就是使整個頁面水平居中的效果，這是在頁面布局中基本，也是最應(yīng)該首先掌握的知識。不過，還是經(jīng)常會有2008-10-17CSS高級技巧:網(wǎng)頁布局-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
上一篇CSS教程 文章：CSS高級技巧:文字環(huán)繞圖片 布局 CSS至關(guān)重要的作用, CSS的設(shè)計初衷. CSS布局和幾年前table橫行時的布局又不太一樣, 在結(jié)構(gòu)化語義化的HTML文檔2008-10-17