作者:WangMin
格言:努力做好自己喜歡的每一件事

在開發過程中，很多網頁需求要求我們居中一個div，比如html文件流當中的一塊div，比如彈出層內容部分這種脫離了文件流等。不同的情況有不同的居中方式，接下來就分享下一下幾種常用的居中方式。

1、margin:0 auto 水平居中

也就是將margin-left和margin-right屬性設定為auto，從而達到水平居中的效果。前提：已設定width值。

HTML:

<div class="box"></div>

CSS:

.box{
	width:500px;
	height:100px;
	background:#f00;
	margin:0 auto;
}
 

注意：這種對齊方式要求居中元素是塊級元素，並且不能脫離文件流（如設定position:absolute）,否則無效。

2、text-align:center 方式

這種方式可以水平居中塊級元素中的行內元素，如inline，inline-block；

<div class="box">
	<span>text-algin:center</span>
</div>

.box{
	width:500px;
	height:100px;
	background:#f00;
	text-align: center;
}
.center_text{
	display:inline-block;
	width:500px
}
 

但是如果用來居中塊級元素中的塊級元素時，如div中的div，當內層的div有自己的寬度，這種方法就會失效。只能讓裡面div的文字等內容居中，而div仍然是左對齊的。

一般的圖片居中都是和text-align一樣，將圖片包裝在一個div中，將該div的text-align設為center即可。

<div class="box">
	<img src="img/5d8eb50e70116.png" width="200px" height="150px"/>
</div>

.box{
	width:300px;
	background:#f00;
	text-align: center;
}
 

3、position:absolute方式水平垂直居 (脫離文件流的居中方式)

1）absolute + 負margin（已知寬高 ）
使用絕對定位和負外邊距對塊級元素進行垂直居中，利用 position:absolute 搭配top，left 50%，再將 margin 設為負值也可以對div進行水平垂直居中。margin中的值為該div寬度、高度的一半。

<div class="box">
	<div>position: absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -100px;</div>
</div>

.box{
	width:300px;
	height:300px;
	background:#f00;
	position: relative;
}
.box>div{
	width:200px;
	height:200px;
	position: absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -100px;
	background:palegoldenrod;
}

我們可以總結成一個公式：
left:50%； margin-left:負的寬度的一半；top:50%； margin-top:負的高度的一半；

以上CSS程式碼可以簡化，但居中效果一樣：使用css3計算的方式居中元素calc，程式碼如下：

.box>div{
	width:200px;
	height:200px;
	position: absolute;
	top: calc(50% - 100px);
    left: calc(50% - 100px);
	background:palegoldenrod;
}

以上程式碼的計算原理跟我總結的公式原理是一致的，其優點是簡化程式碼，提高網頁的執行效率。

2）absolute + transform（未知寬高）
這個方法相容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。但是當我們不知道被居中塊級元素的尺寸的時候該怎麼辦呢？解決方式如下：

.box>div{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	background:palegoldenrod;
}

這種方法非常明顯的好處就是不需要知道被居中的元素的尺寸，因為transform中偏移的百分比就是相對於元素自身的尺寸來說的，當被居中的元素是被自己內部元素撐開寬或者高的時候可適用此方法。
3）absolute + margin auto

<div class="box">	
	<div>absolute + margin auto</div>
</div>

.box{
	width:400px;
	height:300px;
	background:#DEB887;
	position: relative;
}
.box>div{
	width:200px;
	height:200px;
	display: inline-block;
	position: absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom: 0px;
	margin:auto;
	background:palevioletred;
}

4、padding 填充方式

利用 padding 和 background-clip 配合實現 div 的水平垂直居中，通過 backgroun-clip 設定為 content-box ，將背景裁剪到內容區外沿，再利用 padding 設為外div減去內div的差的一半，來實現：

<div class="box">
	<div>padding: 75px;
	background-clip:content-box;
	</div>
</div>

.box{
	width:300px;
	background:#f00;
}
.box>div{
	width:150px;
	height:150px;
	padding: 75px;
	background:palegoldenrod;
	background-clip:content-box; /*居中的關鍵*/
}

這種方式看似沒有什麼技術含量，但其實在某種場景下也是非常好用的。

5、display:table-cell（未知寬高）

給父元素設定 display:table，可以通過 display: table-cell 將要對居中的子元素模擬成一個表格單元格 td， 配合 width，text-align:center，vertical-align:middle 讓大小不固定元素垂直居中，float、absolute 等屬性都會影響它的實現，不影響margin屬性。

<div class="box">
	<div class="center_text">讓大小不固定元素垂直居中</div>
</div>

.box{
	display: table;
	width:400px;
	height:200px;
	background:#f00;
}
.box>.center_text{
	display: table-cell;
	background:blanchedalmond;
	text-align:center;
	vertical-align: middle;
}

6、display:flex 居中

元素可以通過設定 display:flex; 將其指定為flex佈局的容器，指定好了容器之後再為其新增 align-items 屬性和 justify-content 屬性，其中 align-items 屬性屬性定義專案在交叉軸（這裡是縱向周）上的對齊方式，可能的取值有五種，分別如下：
flex-start:交叉軸的起點對齊；flex-end:交叉軸的終點對齊；
center：交叉軸的中點對齊；baseline專案第一行文字的基線對齊；
strech(該值是預設值)：如果專案沒有設定高度或者設定為auto，那麼將佔滿整個容器的高度。

<div class="box">	
	<div class="center_text">display: flex;</div>
</div>

.box{
	width:400px;
	height:200px;
	background:#f00;
	display: flex;
	align-items: center; /*垂直居中*/
	justify-content: center;/*水平居中*/
}
.box>.center_text{
	width:200px;
	height:100px;
	background:blanchedalmond;
}

這種方式最為簡便，就是相容性不好，不過隨著時間的前進，各大瀏覽器一定會都相容的。

7、line-height 行高方式

行內元素的垂直居中把height和line-height的值設定成一樣的即可。

<div class="box">	
	<span>line-height: 100px;</span>
</div>

.box{
	width:200px;
	height:100px;
	line-height: 100px;/*行高與高度一致*/
	text-align: center;
	background:#f00;
}

8、css3的fit-content

“fit-content”是CSS中給“width”屬性新加的一個屬性值，他配合margin可以輕鬆的實現水平居中的效果，但是瀏覽器相容性差，不推薦使用。

<div class="box">	
	<div>width: fit-content;</div>
</div>

.box{
	width: fit-content;
	margin: 0 auto;
	background:#ccc;
}

9、利用vertical-align:middle（未知寬高）

這個方法關鍵要有一個和容器一樣高的元素作為居中的一個參照就像b元素一樣，而且還要結合 display:inline-block。這方法不常見，所以不推薦使用。

<div class="box">	
	<b class="vamb"></b>
	<div class="test">利用vertical-align:middle</div>
</div>

.box{
	width:300px;
	height:300px; 
	background:rgba(0,0,0,0.5);
	text-align:center;
	font-size:0;
}
.vamb{
	display:inline-block; 
	width:0px;
	height:100%;
	vertical-align:middle;
}
 .test{
 	display:inline-block;
	vertical-align:middle;
	font-size:16px;
	text-align:left;
	background:red;
 }

以上是我目前所能理解的元素居中方式，後面如果有新的方式會補充的。

以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這裡!!