CSS百分比

demo

by Mike Lin

HTML

<div class="border-container">
<div class="cube"></div>
</div>

<div class="border-container">
<div class="cube1"></div>
</div>

CSS

.border-container{
  width: 100px;
  height: 100px;
  border: 1px dotted #666;
}

.cube{
  padding: 10px 10px;
  width: 50px;
  height: 30px;
  transform: translateX(50%) translateY(30%);
  border: 1px dotted #999;
}

.cube1{
  width: 50px;
  height: 30px;
  transform: translateX(50%) translateY(30%);
  border: 1px dotted #999;
}