让div垂直居中

Posted 2022-01-12 gaoqiking

参考链接：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;