再談水平垂直居中

DOM結構

	<div class="wrapper">
		<div class="box"></div>
	</div>
	<div class="container">
		<span class="box-2"></span>
	</div>

1. flex+margin: auto—— 水平垂直居中塊級元素或行內級元素
   容器內只有一個子元素：使用display: flex加margin: auto，父元素使用flex佈局，子元素使用margin: auto屬性；具體可以參考中國第五屆CSS大會視頻；如果子元素設置margin-top，則子元素佈局位於左下角；若子元素設置margin-left，則元素佈局位於右上角；auto會自動佔據容器的可用空間；因此，marign-left會使元素右對齊，margin-top會使元素底對齊；

   該方法對於內層是行內級元素也同樣適用；具體查看demo、demo2

   當外層沒有專門設置display: flex屬性時，如我們常見的使用margin: 0 auto進行水平居中；水平方向auto評分可用空間，故元素會水平居中；而垂直方向的高度具有很高的擴展性，經常是補丁的，所以會通常margin: auto會將垂直方向的auto解析爲0而不是平分可用空間使其居中；

   在flex佈局中，由於容器和項目的父子容器關係被承認，也因此在垂直方向上有了可計算的基準，故在外層設置display: flex屬性後內層元素可以通過margin: auto屬性進行水平垂直居中；

   	.wrapper {
   		position: relative;
   		display: flex;
   		width: 600px;
   		height: 400px;
   		overflow: hidden;
   		background: orange;
   	}
   	.box {
   		margin: auto;
   		width: 50%;
   		height: 50%;
   		background: lightblue;
   	}
   

2. flex佈局 —— 居中塊級元素或者行內級元素

   	.wrapper {
   		position: relative;
   		display: flex;
      		justify-content: center;
           align-items: center;
   		width: 100vw;
   		height: 60vw;
   		overflow: hidden;
   		background: orange;
   	}
   	.box {
   		width: 30%;
   		height: 50%;
   		background: lightblue;
   	}
   

3. grid佈局 —— 水平垂直居中塊級元素或行內級元素
   代碼如下，具體查看demo

   	.wrapper {
   		display: grid;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		width: 30%;
   		height: 50%;
   		place-self: center; /* justify-self與align-self的縮寫 */
   		background: lightblue;
   	}
   

4. position: absolute + transform —— 子元素寬度未知或已知：
   代碼實現如下，具體查看demo

   	.wrapper {
   		position: relative;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		position: absolute;
   		top: 50%;
   		left: 50%;
   		-webkit-transform: translate(-50%, -50%);
   			 -moz-transform: translate(-50%, -50%);
   				-ms-transform: translate(-50%, -50%);
   				 -o-transform: translate(-50%, -50%);
   						transform: translate(-50%, -50%);
   		width: 30%;
   		height: 50%;
   		background: lightblue;
   	}
   

5. position: absolute + margin —— 子元素寬度已知：
   代碼實現如下， 具體可查看demo：

   	.wrapper {
   		position: relative;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		position: absolute;
   		top: 50%;
   		left: 50%;
      		margin-top: -15%;
      		margin-left: -15%;
   		width: 30%;
   		height: 50%;
   		background: lightblue;
   	}
   

6. position: absolute + margin: auto
   代碼如下所示，具體可查看demo，此時的效果和類型一中使用flex+margin: auto情況類似；

   	.wrapper {
   		position: relative;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		position: absolute;
   	    top: 0;
   	    left: 0;
   	    right: 0;
   	    bottom: 0;
   		width: 30%;	 /* 如果不設置寬高，默認寬高爲容器寬高 */
   		height: 50%;
     		margin: auto;
   		background: lightblue;
   	}
   

7. display: table-cell + text-align: center + vertical-align: middle —— inline/ inlie-block元素
   代碼實現如下，具體可查看demo

   	.wrapper {
   		position: relative;
   		display: table-cell;
   		width: 100vw;
   		height: 60vw;
   		text-align: center;
   		vertical-align: middle;
   		background: orange;
   	}
   	.box {
   
   	}
   

---

參考文獻：

1. https://www.yuque.com/cssconf/5th
2. https://www.w3schools.com/cssref/pr_class_display.asp
3. https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex