宽高不确定,垂直居中

>div {
                    width: 60%;
                    height: 0; // 设置高为0,让padding撑起高
                    padding-bottom: 60%; /* 让div的高等于宽 */
                    border-radius: 50%;
                    color: white;
                    margin: 20px auto;
                    position: relative;
                    i{
                        font-size: 60px;
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform:translate(-50%,-50%);
                        text-align: center;
                    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 对于许多前端来说,让图片居中有很多办法,但是最简单,最便捷的有哪些方法呢? padding? margin?对于单...
    qyer0222阅读 3,025评论 2 2
  • 需求:针对浏览器窗口,图片水平居中。浏览器窗口高宽未知;图片高宽未知;且必须考虑图片比窗口大要兼容低版本ie,所以...
    monvhh阅读 710评论 0 0
  • 今天,老师给我们放了一部电影给我们看,电影的名字叫《美丽人生》。你们听到名字,就一定会猜想到,这部电影主人公...
    高兴t阅读 412评论 0 3
  • 我们不说无天怎样的战败那妖孽,他的战斗天天发生,以他的神勇也常常胜利。来说说当时的我吧。 我坐下来伤心够了,再站起...
    花海洋阅读 150评论 5 1
  • 中国青年报进行的一次问卷调查显示,72.6%的受访者平均每周加班1次及以上。具体来说,每周加班5次或5次以上的占5...
    其牙阅读 1,113评论 0 0