常見問題總結

一.  元素垂直居中 的10種方法

　　當元素寬高固定時：

　　　　三種方法（都是用了脫離文檔流的定位）：

　　　　　　　　absolute + 負margin

　　　　　　absolute  + margin auto

　　　　　　absolute  + calc 

　　　　方法一：absolute  + margin 負值

　　　　　　width:100px;

　　　　　　height: 200px;

　　　　　　left : 50%;

　　　　　　top:  50%;

　　　　　　margin-left：-50px;

　　　　　　margin-top: -100px;

　　　　方法二(寬高固定與不固定均可以用)：

　　　　　　　　absolute   +  margin auto　　

　　　　　　width : 100px;(50%)

　　　　　　height:  200px;(50%)

　　　　　　position ：absolute;

　　　　　　left:0;  top:0; right:0; bottom:0;

　　　　　　margin:auto;

　　　　方法三：

　　　　　　absooute  +  calc

　　　　　　width:100px;

　　　　　　height:200px;

　　　　　　position:absolute;

　　　　　　left:calc(50%  -   50px);

　　　　　　top:calc( 50%   -  100px);

　　當元素寬高不固定時：

　　　　方法四： position +  translate

　　　　　　.fatherDiv{ 

　　　　　　　　position:relative;

　　　　　　　　width:

　　　　　　　　height:　　

　　　　　　}

　　　　　　.targetDiv{

　　　　　　　　position: absolute;

　　　　　　　　left 50%;

　　　　　　　　top: 50%;

　　　　　　　　tansform:translate(-50%, -50%);

　　　　　　}

　　　　　　方法五：

　　　　　　　　　　line-hieght

　　　　　　　　.parentDiv{

　　　　　　　　　　line-height: 300px;

　　　　　　　　　　text-align:center;

　　　　　　　　　　font-size: 0;　　

　　　　　　　　}

　　　　　　　　.targetDiv{

　　　　　　　　　　font-size：16px;

　　　　　　　　　　line-height:initial;

　　　　　　　　　　text-align:left;

　　　　　　　　　　display: inline-block;

　　　　　　　　　　vertical-align:middle;

　　　　　　　　}

　　　　　　方法六：

　　　　　　　　table

　　　　　　　　利用表格的自帶的垂直居中屬性，將DIv放在td中，再加上text-align ：center便可，可是缺點是會有冗餘代碼，也不是正確用法。

　　　　　　方法七：

　　　　　　　　display:table-cell;

　　　　　　　　.parentDiv{

　　　　　　　　　　display:table-cell;

　　　　　　　　　　text-align:center;

　　　　　　　　　　vertical-align:middle;

　　　　　　　　}

　　　　　　　　.targetDiv{

　　　　　　　　　　display:inline-block;

　　　　　　　　}

　　　　　　　方法八：

　　　　　　　　　優雅的 display :flex;

　　　　　　　　　　.parentDiv{

　　　　　　　　　　　　display : flex;

　　　　　　　　　　　　justify-content: center;

　　　　　　　　　　　　align-items: center;

　　　　　　　　　　}　

　　　　　　方法九：

　　　　　　　　.parentDiv{

　　　　　　　　　　display:grid;

　　　　　　　　}

　　　　　　　　.targetDiv{

　　　　　　　　　　justify-self:center;

　　　　　　　　　　algin-self: center;

　　　　　　　　}