让一个div在页面中居中的常用方法

让一个div在页面中居中的方法有很多，但是呢，这里列出3种我觉得比较简单易懂的。

（1）

text-align:center;
margin:0 auto;
line-height:500px;//这里的行高由大盒子的高决定

（2）

position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);//通过变形来搞定

（3）

display: flex; 
flex-direction: column;//column、row定义项目的排列方向
justify-content: center;
align-items: center;