css如何使寬度和高度相等

 * {
 margin: 0;
 padding: 0;
 }
 html,
 body {
 width: 100%;




 height: 100%;
 }
 .outer {
 width: 400px;
 height: 100%;
 background: blue;
 margin: 0 auto;
 display: flex;
 align-items: center;//垂直居中
 }
 .inner {
 position: relative;
 width: 100%;
 /* height: 0; *///可寫可不寫
 padding-bottom: 50%;
 background: red;
 }
 .box {
 position: absolute;




 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;//水平居中
 align-items: center;//垂直居中
 }

<div class="outer">
 <div class="inner">
 <div class="box">hello</div>
 </div>
 </div>