垂直居中佈局很常用到，自己總結下來以後用的話也很方便，算是對自己上網閱讀資料的一個考核

1.不知道自己高度和父容器高度的情況下, 利用絕對定位只需要以下三行：

parentElement{
        position:relative;
    }

 childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

 }

2.若父容器下只有一個元素，且父元素設定了高度，則只需要使用相對定位即可

    parentElement{
        height
 
:xxx;
    }

    .childElement {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

3.Flex 佈局：

不考慮相容老式瀏覽器的話，用Flex佈局簡單直觀一勞永逸：

parentElement{
    display:flex;/*Flex佈局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

4，使用position:absolute,設定left、top、margin-left、margin-top的屬性

.one{//子元素
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
這種方法基本瀏覽器都能夠相容，不足之處就是需要固定寬高。 5，利用position:absolute屬性，設定top/bottom/right/left

.four{//子元素
position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:black;
} 同上，不足之處需要固定垂直居中元素的寬高 6，最簡單的一種使行內元素居中的方法，使用line-height屬性

.six{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
這種方法也很實用，但是隻限於單行文字 7.vertical-align: middle;只對行內元素有效，例如：
<div class="wrap">
<span class="null"></span>
<span class="in">是的撒大是是的撒所多多的身份丹鳳巔峰是是的撒所多多的身份丹是是的撒所多多的身份丹</span>
</div> css: .in{
width: 90px;
display: inline-block;
vertical-align: middle;
}
.null{
height: 100%;
display: inline-block;
vertical-align: middle;
}
class="null的元素不能省略，就是因為空文字高度等於父元素的高度，然後垂直居中才能讓同級元素居中，這個我理解不是很好，可以自行查資料。