div水平垂直居中方法

总结div水平垂直居中情况，有问题的、有补充的请评论留言谢谢。

第一种（margin设置）

已知父容器宽高为X,Y和子容器宽度高度为x,y
给居中元素设置如下：
margin: 0 auto; //水平居中
margin-top: (Y+y)/2 ;//垂直移动到居中位置

第二种（定位）

给父容器设置：position: relative;
给子元素设置：position: absolute;
1、top: 0; left: 0; right: 0; bottom: 0; margin: auto;
2、已知父容器宽高为X,Y和子容器宽度高度为x,y。 top: 50%; left: 50%; margin-top: -(Y+y)/2 ; margin-left: -(X+x)/2 ;
3、不知道父容器宽度高度。 top: 50%; left: 50%; transform: translate(-50%,-50%);

第三种（盒模型flex布局）

1、给父容器设置：
display: flex;
justify-content: center;
align-items: center;
2、给父容器设置：
display: table-cell;
vertical-align: middle;
text-align: center;