<div class="demo1 square">
  <div>Hello</div>
</div>
<div class="demo2 square">
  <div>Hello</div>
</div>
<div class="demo3 square">
  <div>Hello</div>
</div>
<a href="https://vector.cool" target="_blank">威得數位</a>
/*
CSS RWD square 正方形
"https://vector.cool/css-rwd-square"
*/
.square {
  position: relative;
}
.square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square > div {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* -------------------- demo */

.demo1 {
  border: 2px solid red;
  width: 10%;
  margin-bottom:1%;
}
.demo1 > div{
  display:flex;
  justify-content:center;
}
.demo2 {
  border: 2px solid red;
  width: 20%;
  margin-bottom:1%;
}
.demo2 > div{
  display:flex;
  align-items:center;
  justify-content:center;
}
.demo3 {
  border: 2px solid red;
  width: 30%;
  margin-bottom:1%
}
.demo3 > div{
  display:flex;
  justify-content:center;
  align-items:end;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.