总结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;