第147天：web前端開發中的各種居中總結

一、水準居中

方法① ：行内元素 （父元素）text-align，（子元素）inline-block

.parent{text-align: center;}                 
.child{display: inline-block;}       

總結：

優點：相容性好，支援低版本浏覽器

缺點：需要同時在父元素和子元素上設定

适用場景：子元素數量少（或隻有一個），并且需要相容低版本浏覽器時使用，不受float影響

方法②：塊狀元素   使用margin:0 auto來實作

.child{width:200px;margin:0 auto;}       

優點：相容性好

缺點：需要指定寬度

前提：用于子元素上，不受float影響

方法③：（子元素）display:table;margin:0 auto;

.child{display:table;margin:0 auto;}       

優點：隻需要對自身進行設定

缺點：不相容IE6和IE7

适用場景：子元素數量多，不友善修改父元素的屬性，對浏覽器版本要求相對較低時使用

方法④：絕對定位實作 （父元素）position:relative，（子元素）absolute+left+transform（translateX(-50%)）

.parent{position:relative;}
/*或者實用margin-left的負值為盒子寬度的一半也可以實作，不過這樣就必須知道盒子的寬度，但相容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}       

優點：不影響其他元素

缺點：transform相容性，IE9及以上可用

方法⑤：flex+justify-content/margin

/*第一種方法*/
.parent{display:flex;justify-content:center;}
/*第二種方法*/
.parent{display:flex;}
.child{margin:0 auto;}       

第一種方法：

優點：隻設parent

缺點：flex相容性差，而且比較耗資源

第二種方法：

優點：代碼簡單

缺點：污染父元素，flex相容性問題，如果進行大面積的布局可能會影響效率

二、垂直居中

方法① ：單行文本 設定line-height等于父元素高度

.child{ height:20px; line-height:20px}       

缺點：隻适合一行文本，多行文本則不可以

這是一種很流行的方法, 也适應IE7.

方法② ：行内塊級元素  使用display:inline-block; vertical-align:middle;

.child{display:inline-block; vertical-align:middle}
.parent:after{display:inline-block; vertical-align:middle}       

方法③ ：塊級元素 使用vertical-align的時候，由于對齊的基線是用行高的基線作為标記，故需要設定line-height或設定display:table-cell;

/*第一種方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二種方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}       

優點：相容性比較好，換成table可以相容IE6,7

缺點：table-cell不能和float、position:absolute同時設定。（隻能在外parent外套一層div.wrap才能設定float）

若元素的高度不一定的話

vertical-align隻有在父層為 td 或者 th 時, 才會生效, 對于其他塊級元素, 例如 div、p 等, 預設情況是不支援的. 為了使用vertical-align, 我們需要設定父元素display:table, 子元素 display:table-cell;vertical-align:middle;

/*第一種方法*/
.parent{display:table}
.child{display:table-cell;vertical-align:middle;}      

優點：元素高度可以動态改變，不需要css定義，如果父元素有足夠空間，該元素不會被截斷

缺點：IE6、7，甚至IE8 beta中無效

方法④：使用絕對定位

.parent{position:relative;}

.child{positon:absolute;top:50%;transform:translate(0,-50%);}       

優點：基本隻設定子元素，不影響其他元素

缺點：transform相容性問題

方法⑤：使用flex實作方法 （父）flex + align-items

.parent{display:flex;align-items:center;}       

優點：隻要設定parent

缺點：flex和align-items的相容性

三、【終極需求】水準垂直同時居中！

方法①：元素高度固定

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*寬度;}      

适用于所有浏覽器

方法②：元素高度固定

.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:0;left:0;right:0;
bottom:0;margin:auto
}       

方法③：（父）text-align + table-cell + vertical-align，（子）inline-block（相容性方案）

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}      

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}       

方法⑤：利用flex實作

.parent{display:flex;justify-content:center;align-items:center;}