CSS垂直居中、水平居中（超詳細解析）

讓一個div或者一段文字亦或者一張照片居中顯示的問題，面試的過程中也經常被問到。相信大家都日常的佈局也經常會用到，回答出個三兩種解決方案亦不是難事。但今天我細究了一下，發現還有新大陸可尋，特意留此博文總結一下，與君分享！如果你有新的方法，歡迎補充！???

我們先從固定寬高的div開始

爲方便演示，默認寬高各爲100px的div

<div class="wrapper">
  <div class="content"></div>
</div>

以下方式全部是水平及垂直居中

方法一：padding填充

.content{
	margin: 0 auto;
	padding: 50px;
	width: 100px;
	height: 100px;
	background-color: red;
}

優點：兼容性非常好
缺點：如果父級的高度受到兄弟節點的影響，這樣自己就不居中了

方法二：絕對定位

.wrapper{
	position: relative;
}

.content{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
  background-color: red;
}

優點：兼容性非常好
缺點：需要提前知道div的寬高，實用性偏弱

方法三：計算屬性（calc）

margin: calc((100% - 100px) / 2);
width: 100px;
height: 100px;
background-color: red;

優點：感覺不到有什麼優點
缺點：不僅需要提前知道div的寬高，而且瀏覽器對calc的屬性支持程度不一，會有兼容問題。不推薦使用，建議作爲了解

接下來是不固定寬高的div

爲方便演示，還是默認寬高各爲100px的div

方法四：absolute + margin: auto;

.wrapper{
	position: relative;
}
.content{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: red;
}

優點：不需要提前知道尺寸，兼容性好
缺點：暫時沒有什麼要說的，可能理解起來比較麻煩吧

解析：
1、我們先讓content脫離文檔流，然後設置上右下左四個位置均爲0
2、給它固定寬高，限制大小
3、利用margin屬性，均分外邊距

方法四：absolute + transform

.content{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%,-50%);
  background-color: red;
}

優點：除了不用提前知道大小好像也沒什麼了
缺點：兼容性偏弱

方法五：父級flex佈局

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

優點：寫法極度簡單明瞭
缺點：就是兼容性偏差，未來它可能是解決居中的王道（個人觀點）

方法六：父級table佈局

.wrapper{
	display: table-cell;
	vertical-align: middle;
}

.content{
	margin: 0 auto;
}

優點：寫法極度簡單明瞭,兼容性極好
缺點：就是有點老了

還有一個更古老（有毒）的想法：

<table style="table-layout:fixed; width: 400px;">
	<tr>
  		<td height="400" align="center" valign="middle">
  			<div class="content"></div>
  		</td>
	</tr>
</table>

說！你們是不是想說:

說實話，都9012年，誰要是在我的項目裏這麼幹

方法七：僞元素

.wrapper{
  width: 400px;
  height: 400px;
  text-align: center;
  border: 2px solid blue;
}
.wrapper:after{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.content{
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background-color: red;
}

方法八：僞元素的另外一種實現方式（兄弟節點）

html:

<div class="wrapper">
	<div class="content"></div>
	<div class="brother"></div>
</div>

style:

.wrapper{
  width: 400px;
  height: 400px;
  text-align: center;
  border: 2px solid blue;
}

.content, .brother {
  display: inline-block;
  vertical-align: middle;
}
.content {
    width: 100px;
    height: 100px;
    background-color: red;
}
.brother {
    height: 400px;
}

說實話，我也不知道這是爲什麼，《CSS世界》第四章在講解這個，如果有需要PDF換私信我哦！我要跑步去了，恐怕沒有時間了，下次知道原因再給家解析吧，或者評論告訴我。

再補充點吧！

方法九： line-heght（僅限單行文字垂直居中)

.wrapper {
   height: 400px;
   line-height: 400px;
   border: 1px solid red;
}

img居中

如同這樣的效果：

其實上面的方法一道八變通一下，都可以實現圖片的居中，這裏再分享一個奇技淫巧！

.wrapper{
  width: 400px;
  height: 400px;
  text-align: center;
  border: 2px solid blue;
  background-image: url('./bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

就是background-position：center

碼字不易，創造更不易，麻煩大家給一個關注吧！