說道css噁心的垂直問題，我們首先要提下這個問題
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？


如果元素的display為none,那麼元素不被渲染,position,float不起作用,如果元素擁有position:absolute;或者position:fixed;屬性那麼元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會脫離文件流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其他元素margin摺疊.


1.使用position或relative居中
div {
 position: relative;/* 相對定位或絕對定位均可 */
 width:500px;
 height:300px;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -250px; ||   transform:translate(-50%,-50%);/* 外邊距為自身寬高的一半 */
 background-color: pink; /* 方便看效果 */
  }


2.使用position
 div {
 position: absolute;
 width: 300px;
 height: 300px;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background-color: pink;/* 方便看效果 */
 }


3.浮動元素居中(上面兩種方法也適用)
.parent{
 float:left;
 position:relative;
 left:50%;
}
.child{
 float:left;
 position:relative;
 right:50%;
}


css垂直居中
.parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}


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