2
\$\begingroup\$

Just experimenting some things with css, I made a centered circle div (inner) which is inside a circle div (outer). 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .outer {
            background-color: skyblue;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            padding: 25px 25px 25px 25px;
        }
        .inner {
            background-color: lightgreen;
            height: 150px;
            width: 150px;
            border-radius: 50%;
            margin: 25px 25px 25px 25px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

The thing is I had to give padding in "outer" and also margin to "inner". So I want to know if there is a better way of doing this.

Improve this question
\$\endgroup\$

2 Answers 2

Reset to default
2
\$\begingroup\$

There are many ways to achieve this, from them here are 3 examples...

Check the code below and here is how it works:

The first one uses flex with the css class center-f-inside (shorthand for: center everything inside this element with flex). You can add this to the outer circle. In the code I have also added this class to the inner circle so that I can center the text inside.

The second one uses grid with the css class center-g-inside (shorthand for: center everything inside this element with grid). You can add this to the outer circle. In the code I have also added this class to the inner circle so that I can center the text inside. Note that this is not supported in legacy browsers like IE, as grid was implemented only a few years ago.

The third one uses positioning with the css class center-p-inside (shorthand for: center this element with position absolute in relation with some parent) and css class relative (adds position: relative to the parent). You can add relative to the outer circle and center-p-inside to the inner circle. The after pseudo element is used so that I can center the text inside using flex.

I am using transform in the center-p-inside class to center it evenly as top: 50% and left: 50% will position your div's top-left corner to the center of the parent div. Hence using translate (-50%, -50%) makes it so that now the center of your child div is positioned exactly at the center of your parent div from the origin of child div (origin of your child div is by default at the center of your child div).

Now you don't need those pesky margin and padding hacks :)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>

      body {
        margin: 0;
      }

      .outer {
        background-color: skyblue;
        height: 200px;
        width: 200px;
      }

      .inner {
        background-color: lightgreen;
        height: 150px;
        width: 150px;
      }

      /* Special circle class to enhance html readability */
      .circle {
        border-radius: 50%;
      }

      /* Add this to the outer circle - Flex */ 
      /* Added to the inner circle to center text */
      .center-f-inside {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* Add this to the outer circle - Grid */ 
      /* Added to the inner circle to center text */
      .center-g-inside {
        display: grid;
        place-items: center;
      }

      /* Add this to the outer circle - Positioning */
      .relative {
        position: relative;
      }

      /* Add this to the inner circle - Positioning */
      .center-p-inside {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* This pseudo element is only used to center text, ignore */
      .center-p-inside::after {
        content: "absolute";
        width: 100%;
        height: 100%;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <!--With Flex-->
    <div class="outer circle center-f-inside">
      <div class="inner circle center-f-inside">flex</div>
    </div>

    <!--With Grid-->
    <div class="outer circle center-g-inside">
      <div class="inner circle center-g-inside">grid</div>
    </div>

    <!--With Positioning-->
    <div class="outer circle relative">
      <div class="inner circle center-p-inside"></div>
    </div>
  </body>
</html>

Improve this answer
\$\endgroup\$
2
  • 1
    \$\begingroup\$ You don't have a Stack Overflow account? \$\endgroup\$
    – Was'
    Sep 29, 2021 at 11:52
  • 2
    \$\begingroup\$ I think I do... But its been so long that I forgot about it \$\endgroup\$
    – Neopentene
    Oct 1, 2021 at 8:06
1
\$\begingroup\$

instead of the margin and padding, you can declare the outer circle as a grid, which allows you alignment control of its children: (note that place-items aligns vertically and horizontally)

    display: grid;
    place-items: center;
Improve this answer
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.