参考链接:https://www.cnblogs.com/softwarefang/p/6095806.html
以前我的方法总是比较粗暴,纯粹通过margin来实现,这个方法的缺点不仅在于需要多次微调来确定margin的值,更愚蠢的地方在于,这个办法太没有技术了,设置margin会对页面原本元素的尺寸造成影响,刚好最近用这个东西比较多,我就抱着不怕学不会的心态上网搜索了一下,结果看到了一个这样的方法。
div{
width:260px;
height: 210px;
position: absolute;
left: 50%;
top:50%;
margin: -105px 0 0 -130px;
}
这个方法的大概思想是想通过定位来让盒子定外到一个大致的区域,然后再根据他的长宽算出这样定位的误差,用margin去修正,这样就让一个盒子实现了水平和垂直居中。
使用margin的css,这样会造成全屏时的浏览器窗口出现上下的滚动条。
div{
width:260px;
height: 210px;
margin:20% auto;
background:rgb(194, 199, 202, 0.3);
text-align: center;
background-size: cover;
}
转载于:https://www.cnblogs.com/Gaoqiking/p/11028084.html