Reputation: 803
The div
with border: 2px solid red
has 2 pseudo elements, ::before
and ::after
, each with border-color: green
and border-color: blue
respectively. I'm trying to align the green
and blue
circles in the centre of the red
square. But unable to do so.
I've the following code:
.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>
I also searched for the solution and found these:
But they do not work for me. Please help. Thank you.
Edit
The problem occurs due the different height
and width
of the ::before
and ::after
pseudo elements. Because, when height
and width
of both changed to the same value, then they aligned to the centre. However, I'm trying to align them in centre while keeping the height
and width
of each circle distinct.
Upvotes: 0
Views: 589
Reputation: 274384
In case you are intrested you can simplify your code without the need of using pseudo element:
.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>
Upvotes: 1
Reputation: 708
I've done some changes in your CSS, It works
.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>
Upvotes: 1
Reputation: 4185
If you know the box's dimensions, you can position: absolute
the peuso-elements and then center them via the transform: translate(-50%, -50%)
approach. Hope that helps.
.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>
Upvotes: 2