Question

带有div的{{1}}具有2个伪元素border: 2px solid red和::before，每个伪元素分别具有::after和border-color: green。我正在尝试在border-color: blue正方形的中心对齐green和blue圆圈。但无法这样做。

我有以下代码：

red

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.loader::after,
.loader::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
  left: 25%;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
  left: -25%;
}

我还搜索了解决方案并找到了这些：

但是它们对我不起作用。请帮忙。谢谢。

修改由于<div class="loader-container"> <div class='loader'></div> </div>和height伪元素的width和::before不同而出现问题。因为，当::after和height都更改为相同值时，它们便与中心对齐。但是，我试图使它们在中心对齐，同时保持每个圆圈的width和height不变。

Answer 1

如果知道盒子的尺寸，则可以position: absolute来修饰元素，然后通过transform: translate(-50%, -50%)方法将它们居中。希望有帮助。

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 200px;
  height: 100px;
  position: relative;
}

.loader::after,
.loader::before {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
}

<div class="loader-container">
  <div class='loader'></div>
</div>

Answer 2

我已经对您的CSS进行了一些更改，效果很好

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  position relative;
  width:150px;
  height:150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.loader::after,
.loader::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.loader::before {
  border: 2px solid blue;
  width: 50px;
  height: 50px;
}

.loader::after {
  border: 2px solid green;
  width: 100px;
  height: 100px;
}

<div class="loader-container">
  <div class='loader'></div>
</div>

Answer 3

以防万一，您可以简化代码，而无需使用伪元素：

.loader-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aquamarine;
}

.loader {
  border: 2px solid red;
  height:102px;
  width:150px;
  background:
    /*circle with a radius of 25px and border 2px blue*/
    radial-gradient(circle at center,
      transparent 24px,blue 25px,blue 26px,transparent 27px),
    /*circle with a radius of 50px and border 2px green*/
    radial-gradient(circle at center,
      transparent 49px,green 50px,green 51px,transparent 52px);
}

<div class="loader-container">
  <div class='loader'></div>
</div>

伪元素对齐问题

3 个答案: