伪元素对齐问题

Question

div和border: 2px solid red有2个伪元素，::before和::after，每个分别有border-color: green和border-color: blue。我试图在 red 正方形的中心对齐 green 和 blue 圆圈。但是做不到。

我有以下代码：

.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>

我也搜索了解决方案，找到了这些：

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

编辑该问题是由于 ::before 和 ::after 伪元素的 height 和 width 不同造成的。因为，当两者的height和width变为相同的值时，它们就居中对齐了。但是，我试图将它们居中对齐，同时保持每个圆圈的 height 和 width 不同。

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>

伪元素对齐问题

Problem with alignment of pseudo elements

html

css

pseudo-element