实现元素垂直居中

1 已知元素的高度

父元素 position:relative

子元素：

   position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;  

2 不知道子元素的高度：

父元素 position:relative

子元素方法1：

position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;

方法2：

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

方法3 使用flex:

父元素设置:

    display: flex;
    align-items: center;
    justify-content: center;

方法4：利用vertical-align

父元素：text-align:center;

父元素::after{content:'';display:inline-block;height:100%;vertical-align:center;}

子元素：display:inline-block;vertical-align:center;