html - 在父 fiv 中居中多个 div 并缩放它们

Question

我有一个问题。我有一个父 div .wrap 和 4 个子 div .circle。 (PUG HTML 预处理器)

.wrap
  .circle
  .circle
  .circle
  .circle

我想做一个简单的白色背景。并且 .circle 分成在 .wrap 内水平对齐的圆圈。

这是我的CSS:

body{
    margin: 0;
    padding: 0;
    background-color: lightblue;
}

.wrap{
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 500px;
    transform: translate(-50%, -50%);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
    border-radius: 10px;
    transition: 500ms;
}

.circle{
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%;
    transform: translate(50%, -50%);
    border-radius: 50%;
    transition: 300ms;
    background-color: lightblue;
}

.circle:nth-child(1){
    left: 25%;
}

.circle:nth-child(2){
    left: 50%;
}

.circle:nth-child(3){
    left: 75%;
}

.circle:nth-child(4){
    left: 0%;
}

我怎样才能让所有东西完全垂直居中？它总是向左走。 当我申请时

transform: scale(1.1,1.1);

我的圈子向下移动。

My code on CODEPEN

Answer 1

这里的圆圈以 flexbox 为中心，即使在缩放时也保持这种状态。

body {
  margin: 0;
  padding: 0;
  background-color: lightblue;
}

.wrap {
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100px;
  width: 500px;
  transform: translate(-50%, -50%);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  transition: 500ms;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: 300ms;
  background-color: lightblue;
  transform-origin: center center;
}

.circle:hover {
  transform: scale(1.5);
}

<div class="wrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Codepen