CSS水平垂直居中常見方法總結2

一、文本水平居中
line-height,text-align:center(文字)
元素水平居中 margin:0 auo

方案1：position 元素已知寬度
父元素設置爲：position: relative;
子元素設置爲：
position: absolute; left: 50%;top: 50%;margin: -50px 0 0 -50px;
距上50%，據左50%，減去元素自身寬度的距離

方案2：position transform 元素未知寬度
margin: -50px 0 0 -50px;替換爲：transform: translate(-50%,-50%);

方案3：flex佈局
父元素加：
display: flex; //flex佈局
justify-content: center; //使子項目水平居中
align-items: center; //使子項目垂直居中