10 種css 水平垂直居中方法

參考地址：https://mp.weixin.qq.com/s/uTnMr4lv_Hrlt2TH9A01gA
（直接網上搜索到的地址，人家整理的比較好）

編寫該博文僅僅作為梳理，鞏固學習，加強記憶。

場景一：居中元素寬高已知

1. absolute + 負 margin
2. absolute + margin auto
3. absolute + calc

場景二：居中元素寬高未知

1. absolute + transform
2. line-height
3. writing-mode
4. table
5. css-table
6. flex
7. grid

html 程式碼

<div class='wrapper'>
  <div class='box'>love 我 love</div>
</div>

場景一：居中元素寬高已知

大小&顏色

div.wrapper {
  width: 400px;
  height: 400px;
  background: #abcdef;
}
div.box {
  width: 100px;
  height: 100px;
  background: yellowgreen;
}
 

效果

1. absolute + 負margin

.wrapper {
  position: relative;
}
.box {
  margin-top: -50px;
  margin-left: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

2. absolute + margin auto

.wrapper {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin
 
: auto;
}

3. absolute + calc

.wrapper {
  position: relative;
}
.box {
  position: absolute;
  top: calc(200px - 50px); // 或 calc(50% - 50px);
  left: calc(200px - 50px); // 或 calc(50% - 50px);
}

場景二：居中元素寬高未知

大小&顏色

div.wrapper {
  width: 400px;
  height: 400px;
  background: #abcdef;
}
div.box {
  background: yellowgreen;
}

效果

1. absolute + transform

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

2. line-height

.wrapper {
  line-height: 400px;
  text-align: center;
  font-size: 0;
}
.box {
  font-size: 16px;
  display: inline-block;
  line-height: initial;
}

3. writing-mode

稍有些複雜，可以參看參考網址中的demo：
http://yanhaijing.com/vertical-center/writing-mode.html

4. table標籤

<table>
	<tbody>
		<tr>
			<td class="wrapper">
				<div class="box">love 我 love</div>
			</td>
		</tr>
	</tbody>
</table>

.wrapper {
   width: 400px;
   height: 400px;
   background: #abcdef;
   text-align: center;
 }

 .box {
   display: inline-block;
   background: yellowgreen;
 }

5. css-table

<div class='wrapper'>
	<div class='box'>love 我 love</div>
</div>

.wrapper {
	width: 400px;
	height: 400px;
	background: #abcdef;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.box {
	display: inline-block;
	background: yellowgreen;
}

6. flex

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

相容性說明：移動端均基本都可以使用flex；pc端需考慮相容性
flex 相容性寫法：
 
display: -webkit-box;
display: -webkit-flex;
display: flex;
 
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
 
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;

7. grid

.wrapper {
	width: 400px;
	height: 400px;
	background: #abcdef;
	display: grid;
}

.box {
	background: yellowgreen;
	align-self: center;
	justify-self: center;
}

總結

• PC 端有相容性要求，寬高固定，推薦 absolute + 負 margin
• PC 端有相容要求，寬高不固定，推薦 css-table
• PC 端無相容性要求，推薦 flex
• 移動端推薦使用 flex

flex 相容性方案：https://yanhaijing.com/css/2016/08/21/flex-practice-on-mobile/

參考地址：https://mp.weixin.qq.com/s/uTnMr4lv_Hrlt2TH9A01gA
（感謝原作者分享）