第一种：基于绝对定位的解决方案
用top,left移动只是将div的左上角移到父元素的正中心，视觉上并没有使div到达中心，所以要配合transform使用。当我们在translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的。
缺点：如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。
div { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
第二种：基于视口单位的解决方案
新的长度单位：vw,vh
1vw=1%的适口宽度
1vh=1%的视口宽度
div {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
第三种：基于flexbox的解决方案
先给这个待居中元素的父元素设置 display:flex ，再给这个元素自身设置我们再熟悉不过的 margin: auto ：
father{ display:flex;min-height:100vh;margin:0;}
child{ margin:auto;
/*以下代码使child的文字也居中
align-items:center; justify-content:center;
*/
}
直接让某div的文字居中，使用属性
{display: flex;
align-items: center;
justify-content: center;}
ps. min-content也是个很有用的属性 。这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）
