div.category{
width:33%;
padding:33% 0 0;
}
1、关键在padding:33% 0 0这句代码，通过设置padding-top与宽度相等（padding使用百分比时，padding-top和padding-bottom使用的也是宽度的百分比，而不是高度的！！！），使div变成正方形。
2、这样设置后，还有问题，div里的内容都被挤到底部了。另外考虑div里文字本身的高度，修改为：
div.category{
width:33%;
padding:14% 0 14% 0;
}
结果：
css设置div高度与宽度相等的一种方法
原文地址：https://www.cnblogs.com/oliverreal/p/9278969.html