正方形，响应式布局

 

写手在作画的夜晚，留下路人惊叹

在这里感谢 我是一名好程序员

响应式布局中的正方形效果

 

 

使用padding-bottom; position: relative;

最外层的div
    width: 50%;
    height: 0;
    float: right;
    text-align: center;
    background: rgba(231, 230, 230, 1);
    padding-bottom: 50%;
    position: relative;

子元素
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

子元素中的子元素就是背景图的div
    background: url('') no-repeat center center;
    background-size: 100% 100%;      

居中的图标
图标居中就好啦                      

 

来源：https://www.cnblogs.com/home-/p/11580173.html