居中那些事兒

這幾個月一直忙着面試，做爲前端小菜鳥，平時寫的一些總結都是word的，一大堆很差找，寫博客方便本身查找閱讀，也是激勵本身要堅持！

文章主要摘自大搜車前端的《解讀CSS佈局之-水平垂直居中》。原文連接 http://www.w3ctech.com/topic/1433

文章講的面面俱到，本身動手研究了一下，作一下總結吧。

那些	狀況	備註
盒子內部的佈局	文本的佈局	text-align：center+line-height
	盒模型自己的佈局	Padding填充和margin填充
盒子之間的佈局(脫離正常流的盒子的佈局)	absolute佈局上下文下的佈局	1.利用left：50%將盒子的左邊先置於父容器的中點，而後再將盒子往左偏移盒子自身寬度的50%（50% + -50%） 2.text-align:center + absolute（text-aign:center原本是不能直接做用於absolute元素的，可是沒有給其left等值的行級absolute元素是會受文本的影響的） 3.absolute + margin : auto （利用上下左右都是0，將自身寬度等同於父親的大小，指定自身寬高，利用margin：0 auto便可，）
	float佈局上下文下的佈局	1.float + -50% 2.margin-bottom : -50%
盒子之間的佈局(正常流下的盒子的佈局)	BFC佈局上下文下的佈局
	IFC佈局上下文下的佈局 (display爲inline性質的行級元素的佈局)	1.text-align:center + vertical-align:middle 2.text-align:center + line-height 3.text-align:center + font-size
	FFC佈局上下文下的佈局
	table佈局上下文下的佈局	.ele{   text-align:center;   vertical-align: middle;   display:table-cell; }
	css grid佈局上下文下的佈局

一些詳細的描述：

發現面試了不少次，而面對一個簡單的問題，可能本身要把全部的方案羅列出來，殊不知最適合此場景的是什麼？上次面試的收穫，一個img的居中。div { line-height: 200px; text-align：center；} img { vertical-align: middle; }，使用text-align：center使之達到水平居中，使用dispaly： inline-block和vertical-align：Middle達到垂直居中，也能夠配合line-height使用。

盒模型自己的佈局(padding填充和margin填充)的具體描述(以上兩種方法均適用於寬高度已知的box)：Padding填充四面八方設置一個相同的值；Margin填充：左右auto，上下設置成你須要居中的高度

             

利用left：50%將盒子的左邊先置於父容器的中點，而後再將盒子往左偏移盒子自身寬度的50%（50% + -50%）

margin方法和relative方法都須要知道元素的寬高才行(relative方法只知道高也行)，適用於固定式佈局，而transform方法則能夠不知道元素寬高

第一種經常使用

第二種換了一種方法，也能夠理解

第三種：外包了一個殼子，核心在於設置空殼子的透明度，將本質要居中的寬高設置於殼子的寬高。

 

 

margin-bottom : -50%

placeholder佔據50%高度，而後給一個居中元素高度一半的負的margin-bottom，而後下面的元素只要跟着擺放就能垂直居中了。

水平方向就是利用translate作偏移，這種方法就是各類固定死，首先最外層的父容器須要一個固定高度，以讓.placeholder的height:50%有效，而後，margin-bottom也須要固定死，並且得須要知道居中元素高度。單純就水平方向來講，這個方法比較適合須要兼容低版本IE的固定式佈局的項目，由於兼容性好。

 

IFC居中核心