居中 · 前端筆記

[TOC] ## 一、水平居中 ### 1.文本/行內元素/行內塊級元素 > 原理：text-align只控制行內內容(文字、行內元素、行內塊級元素)如何相對他的塊父元素對齊 ~~~ <div class="parent"> <span class="children">水平居中</span> </div> .parent{ text-align: center; } ~~~ * 優點：簡單快捷，容易理解，兼容性非常好 * 缺點：只對行內內容有效；屬性會繼承影響到后代行內內容；如果子元素寬度大于父元素寬度則無效，只有后代行內內容中寬度小于設置text-align屬性的元素寬度的時候，才會水平居中 ### 2.單個塊級元素 > 原理：在margin有節余的同時如果左右margin設置了auto，將會均分剩余空間。另外，如果上下的margin設置了auto，其計算值為0 ~~~ <div class="parent"> <div class="children">水平居中</div> </div> .children { margin: 0 auto; width: 500px; } ~~~ * 優點：簡單；兼容性好 * 缺點：必須定寬，并且值不能為auto；寬度要小于父元素，否則無效 ### 3.多個塊級元素 > 原理：text-align只控制行內內容(文字、行內元素、行內塊級元素)如何相對他的塊父元素對齊 ~~~ <div class="parent"> <div class="children">水平居中</div> <div class="children">水平居中</div> <div class="children">水平居中</div> </div> .parent { text-align: center; } .children { display: inline-block; } ~~~ * 優點：簡單，容易理解，兼容性非常好 * 缺點：只對行內內容有效；屬性會繼承影響到后代行內內容；塊級改為inline-block換行、空格會產生元素間隔 ### 4.使用絕對定位實現 > 原理：子絕父相，top、right、bottom、left的值是相對于父元素尺寸的，然后margin或者transform是相對于自身尺寸的，組合使用達到水平居中的目的 ~~~ <div class="parent"> <div class="children">水平居中</div> </div> .parent{ height: 200px; width: 200px; /*定寬*/ position: relative; /*父相*/ background-color: #f00; } .children{ position: absolute; /*子絕*/ left: 50%; /*父元素寬度一半,這里等同于left:100px*/ transform: translateX(-50%); /*自身寬度一半,等同于margin-left: -50px;*/ width: 100px; /*定寬*/ height: 100px; background-color: #00ff00; } ~~~ 優點：使用margin-left兼容性好；不管是塊級還是行內元素都可以實現缺點：代碼較多；脫離文檔流；使用margin-left需要知道寬度值；使用transform兼容性不好（ie9+） ### 5.任意個元素(flex) 原理：設置當前主軸對齊方式為居中。 ~~~ <div class="parent"> <div class="children">水平居中</div> <span class="children">水平居中</span> </div> .parent{ display: flex; justify-content: center; } ~~~ * 優點：功能強大；簡單方便；容易理解 * 缺點：PC端兼容性不好，移動端（Android4.0+）小結： * 對于水平居中，我們應該先考慮，哪些元素有自帶的居中效果，最先想到的應該就是 text-align:center 了，但是這個只對行內內容有效，所以我們要使用 text-align:center 就必須將子元素設置為 display: inline; 或者 display: inline-block; ； * 其次就是考慮能不能用margin: 0 auto; ，因為這都是一兩句代碼能搞定的事，實在不行就是用絕對定位去實現了。 * 移動端能用flex就用flex ## 二、垂直居中 ### 1.單行文本/行內元素/行內塊級元素 > 原理：line-height的最終表現是通過inline box實現的，而無論inline box所占據的高度是多少（無論比文字大還是比文字小），其占據的空間都是與文字內容公用水平中垂線的。 ~~~ <div class="parent"> <span class="children">水平居中</span> </div> .parent{ height: 150px; line-height: 150px; /*與height等值*/ } ~~~ * 優點：簡單；兼容性好 * 缺點：只能用于單行行內內容；要知道高度的值 ### 2.多行文本/行內元素/行內塊級元素 > 原理同上 ~~~ <div class="parent"> <span class="children">水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中水平居中</span> </div> .parent{ /*或者用span把所有文字包裹起來，設置display：inline-block轉換成圖片的方式解決*/ width: 200px; height: 150px; line-height: 30px; /*元素在頁面呈現為5行,則line-height的值為height/5*/ } ~~~ * 優點：簡單；兼容性好 * 缺點：只能用于行內內容；需要知道高度和最終呈現多少行來計算出line-height的值，建議用span包裹多行文本 ### 3.圖片 >原理：見參考資料《CSS深入理解vertical-align和line-height》 ~~~ <div class="parent"> <img class="children" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img class="children" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img class="children" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img class="children" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> </div> .parent { line-height: 450px; font-size: 0; } .children { vertical-align: middle; } /*默認是基線對齊，改為middle*/ ~~~ * 優點：簡單；兼容性好 * 缺點：需要添加font-size: 0; 才可以完全的垂直居中 ### 4.單個塊級元素 ~~~ <div id="parent"> <div id="son"></div> </div> ~~~ #### (1)使用tabel-cell實現 > 原理：CSS Table，使表格內容對齊方式為middle ~~~ #parent{ display: table-cell; vertical-align: middle; } ~~~ * 優點：簡單；寬高不定；兼容性好（ie8+） * 缺點：設置tabl-cell的元素，寬度和高度的值設置百分比無效，需要給它的父元素設置display: table; 才生效；table-cell不感知margin，在父元素上設置table-row等屬性，也會使其不感知height；設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢出時會自動撐開父元素 #### (2)使用絕對定位實現 > 原理：子絕父相，top、right、bottom、left的值是相對于父元素尺寸的，然后margin或者transform是相對于自身尺寸的，組合使用達到水平居中的目的 ~~~ #parent{ height: 150px; position: relative; /*父相*/ } #son{ position: absolute; /*子絕*/ top: 50%; /*父元素高度一半,這里等同于top:75px;*/ transform: translateY(-50%); /*自身高度一半,這里等同于margin-top:-25px;*/ height: 50px; } ~~~ * 優點：使用margin-top兼容性好；不管是塊級還是行內元素都可以實現 * 缺點：代碼較多；脫離文檔流；使用margin-top需要知道高度值；使用transform兼容性不好（ie9+）*/ > 原理：當top、bottom為0時,margin-top&bottom會無限延伸占滿空間并且平分 ~~~ #parent{ position: relative; } #son{ position: absolute; margin: auto 0; top: 0; bottom: 0; height: 50px; } ~~~ * 優點：簡單;兼容性較好(ie8+) * 缺點：脫離文檔流*/ #### (3)使用flex實現 ~~~ #parent{ display: flex; align-items: center; } 或 #parent{display: flex;} #son{align-self: center;} 或 #parent{display: flex;} #son{margin: auto 0;} ~~~ * 優點：簡單靈活；功能強大 * 缺點：PC端兼容性不好，移動端（Android4.0+） ### 5.任意個元素 ~~~ #parent{ display: flex; align-items: center; } 或 #parent{ display: flex; } .son{ align-self: center; } 或 #parent{ display: flex; flex-direction: column; justify-content: center; } ~~~ * 優點：簡單靈活；功能強大 * 缺點：PC端兼容性不好，移動端（Android4.0+）小結 * 對于垂直居中，最先想到的應該就是 line-height 了，但是這個只能用于行內內容； * 其次就是考慮能不能用vertical-align: middle; * 然后便是絕對定位，雖然代碼多了點，但是勝在適用于不同情況； * 移動端兼容性允許的情況下能用flex就用flex ## 三、水平垂直居中 ### 1.行內/行內塊級/圖片 > 原理：text-align: center; 控制行內內容相對于塊父元素水平居中,然后就是line-height和vertical-align的基友關系使其垂直居中，font-size: 0; 是為了消除近似居中的bug ~~~ #parent{ height: 150px; line-height: 150px; /*行高的值與height相等*/ text-align: center; font-size: 0; /*消除幽靈空白節點的bug*/ } #son{ /*display: inline-block;*/ /*如果是塊級元素需改為行內或行內塊級才生效*/ vertical-align: middle; } ~~~ * 優點：代碼簡單；兼容性好（ie8+） * 缺點：只對行內內容有效；需要添加font-size: 0; 才可以完全的垂直居中；不過需要注意html中#parent包裹#son之間需要有換行或空格；熟悉line-height和vertical-align的基友關系較難 ### 2.table-cell > 原理：CSS Table，使表格內容垂直對齊方式為middle,然后根據是行內內容還是塊級內容采取不同的方式達到水平居中 ~~~ #parent{ height: 150px; width: 200px; display: table-cell; vertical-align: middle; /*text-align: center;*/ /*如果是行內元素就添加這個*/ } #son{ /*margin: 0 auto;*/ /*如果是塊級元素就添加這個*/ width: 100px; height: 50px; } ~~~ * 優點：簡單；適用于寬度高度未知情況；兼容性好（ie8+） * 缺點：設置tabl-cell的元素，寬度和高度的值設置百分比無效，需要給它的父元素設置display: table; 才生效；table-cell不感知margin，在父元素上設置table-row等屬性，也會使其不感知height；設置float或position會對默認布局造成破壞，可以考慮為之增加一個父div定義float等屬性；內容溢出時會自動撐開父元素 ### 3.button作為父元素 > 原理：button的默認樣式，再把需要居中的元素表現形式改為行內或行內塊級就好 ~~~ button#parent{ /*改掉button默認樣式就好了,不需要居中處理*/ height: 150px; width: 200px; outline: none; border: none; } #son{ display: inline-block; /*button自帶text-align: center,改為行內水平居中生效*/ } ~~~ * 優點：簡單方便，充分利用默認樣式 * 缺點：只適用于行內內容；需要清除部分默認樣式；水平垂直居中兼容性很好，但是ie下點擊會有凹陷效果！ ### 4.絕對定位 > 原理：子絕父相，top、right、bottom、left的值是相對于父元素尺寸的，然后margin或者transform是相對于自身尺寸的，組合使用達到幾何上的水平垂直居中 ~~~ #parent{ position: relative; } #son{ position: absolute; top: 50%; left: 50%; /*定寬高時等同于margin-left:負自身寬度一半;margin-top:負自身高度一半;*/ transform: translate(-50%,-50%); } ~~~ * 優點：使用margin兼容性好；不管是塊級還是行內元素都可以實現 * 缺點：代碼較多；脫離文檔流；使用margin需要知道寬高；使用transform兼容性不好（ie9+） ### 5.絕對居中 > 當top、bottom為0時,margin-top&bottom設置auto的話會無限延伸占滿空間并且平分；當left、right為0時,margin-left&right設置auto的話會無限延伸占滿空間并且平分 ~~~ #parent{ position: relative; } #son{ position: absolute; margin: auto; width: 100px; height: 50px; top: 0; bottom: 0; left: 0; right: 0; } ~~~ * 優點：無需關注寬高；兼容性較好(ie8+) * 缺點：代碼較多；脫離文檔流 ### 6.flex ~~~ #parent{ display: flex; } #son{ margin: auto; } 或 #parent{ display: flex; justify-content: center; align-items: center; } 或 #parent{ display: flex; justify-content: center; } #son{ align-self: center; } ~~~ * 優點：簡單靈活；功能強大 * 缺點：PC端兼容性不好，移動端（Android4.0+） ### 6.視窗居中 > 原理：vh為視口單位，視口即文檔可視的部分，50vh就是視口高度的50/100，設置50vh上邊距再 ~~~ #son{ /*0如果去掉，則會多出滾動條并且上下都是50vh的margin。如果去掉就給body加上overflow:hidden;*/ margin: 50vh auto 0; transform: translateY(-50%); } ~~~ * 優點：簡單；容易理解；兩句代碼達到屏幕水平垂直居中 * 缺點：兼容性不好（ie9+，Android4.4+）小結：一般情況下，水平垂直居中，我們最常用的就是絕對定位加負邊距了，缺點就是需要知道寬高，使用transform倒是可以不需要，但是兼容性不好（ie9+）；其次就是絕對居中，絕對定位設置top、left、right、bottom為0，然后margin:auto; 讓瀏覽器自動平分邊距以達到水平垂直居中的目的；如果是行內/行內塊級/圖片這些內容，可以優先考慮line-height和vertical-align 結合使用，不要忘了還有text-align ，這個方法代碼其實不多，就是理解原理有點困難，想要熟練應對各種情況還需好好研究；移動端兼容性允許的情況下能用flex就用flex。 ### 7. vertical-align + inline-block 居中 ~~~ #parent { text-align: center; /* * 定高 * height: 500px; */ /* 適配屏幕 * position: absolute; * top: 60px; * bottom: 220px; */ } #parent::before{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; } #son{ display: inline-block; vertical-align: middle; } ~~~ ## 參考資料 [干貨!各種常見布局實現+知名網站實例分析](https://juejin.im/post/5aa252ac518825558001d5de) [CSS深入理解vertical-align和line-height](http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/comment-page-1/#comments)