html设置宽高相同,css怎么使宽高相等？

在开发工程中，我们经常要用到宽高相等这个方式，但是很多新手不知道怎么设置比较好，这里我给大家介绍一种思路设置宽高相等的纯css实现方法。

代码如下：

```

米醋儿网

div.category{

width:32%;

padding:32% 0 0 0;

float: left;

margin-left: 1%;

margin-top: 1%;

background-color: antiquewhite;

position: relative;

}

.category_title{

position: absolute;

top: 16%;

font-size: 1.2rem;

width: 100%;

text-align: center;

}

米醋儿

米醋儿

米醋儿

米醋儿

```

> 原理：padding使用百分比时，padding-top和padding-bottom使用的也是宽度的百分比，而不是高度的！！！

效果预览：

[](https://cdn.micuer.com/data/upload/20210208/6020a90d4cf12.png)

整体还不错吧，大家拿去改良一下就可以用了。