How do I center the dots (SVG) with the class .stroke1 - html

Question

This is the needed code
.strokes {
display: flex;
width: 100%;
}
.stroke1 {
position: absolute;
z-index: 1002;
justify-content: center;
text-align: center;
align-items: center;
}
<section class="home" id="home">
<div class="max-width">
<div class="star star1"></div>
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span class="txt-rotate"
data-period="2000"
data-rotate='[ "Developer.", "UX Designer.", " Programmer.", "Full-Stack Dev.", "Marketer" ]'
id="headSpan"></span></div>
Hire Me
</div>
</div>
</section>
</header>
<div class="strokes">
<svg class="stroke1" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="3em" width="3em" xmlns="http://www.w3.org/2000/svg"><path d="M456 231a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 280a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 280a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg>
</div>
I want the stroke to be in the middle of the page but nothing is working , it always stays on the left side , am I doing anything wrong ?

Answer 1

If all you're trying to do is center the <svg> then there were a couple issues with your code. First, justify-content and align-items need to be set on the flex container itself (i.e. the same element that has the display: flex rule applied to it), not its children. Second, anything that is absolutely positioned will override any inherent flex positioning applied to it, so I don't think you want that in this case.
Here's an updated code snippet that addresses the above points and thus centers the dots.
.strokes {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
width: 100%;
}
.stroke1 {
z-index: 1002;
}
<section class="home" id="home">
<div class="max-width">
<div class="star star1"></div>
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span class="txt-rotate"
data-period="2000"
data-rotate='[ "Developer.", "UX Designer.", " Programmer.", "Full-Stack Dev.", "Marketer" ]'
id="headSpan"></span></div>
Hire Me
</div>
</div>
</section>
</header>
<div class="strokes">
<svg class="stroke1" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="3em" width="3em" xmlns="http://www.w3.org/2000/svg"><path d="M456 231a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 280a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 280a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg>
</div>