让div垂直居中

时间:2019-06-15
本文章向大家介绍让div垂直居中,主要包括让div垂直居中使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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