這幾個月一直忙著面試，作為前端小菜鳥，平時寫的一些總結都是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居中核心

轉載于:https://www.cnblogs.com/gxlfc/p/4760005.html

總結

以上是生活随笔為你收集整理的居中那些事儿的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。