css垂直居中

一、只适用于高度固定的情况

line-height：设置值为整个元素的高度
padding：根据元素高度，设置具体的padding
margin：根据元素高度，设置具体的margin

二、元素内容/高度不固定
方法一：flex

{ 
    display: flex;
    align-items: center;  // 垂直居中
    justify-content: center;   // 横向居中
}

方法二：浮动

父元素：{ position: relative；}
子元素：{ position: absolute; top: 50%; transform: translate(50%, -50%); }

方法三：table-cell

{ display: table-cell; vertical-align: middle; }