HTML/CSS help with centering circle

Would love some help with this, i’m trying to create a flag with the circle centred but mine keeps floating at the top! Help, can you point me in the right direction? I’m very much a newbie so please overlook any complexity.


<div id="laos">
            <div id="laos-blue"></div>
            <div id="laos-circle"></div>


#laos {
    width: 300px;
    height: 210px;
    background-color: red;
    margin: 50px;

#laos-blue {
    width: 300px;
    height: 110px;
    background-color: rgb(30, 72, 161);
    margin-top: 50px;
    border-top: 50px solid rgb(204, 48, 48);
    border-bottom: 50px solid rgb(204, 48, 48);

#laos-circle {
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 30px;
    margin-left: 120px;


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

Hi @jkw16 !

Welcome to the forum!

You are trying to recreate the laos flag, right?

Screen Shot 2021-07-13 at 4.27.25 PM

Something like this could work.

Hope that helps!


brilliant, thank you so much!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.