Home/ Questions/Q 8132215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T09:17:27+00:00

I have two divs one inside another. I have given some border to both

  • 0

I have two divs one inside another. I have given some border to both the divs and I want both the divs to be in the center with respect to the page both horizontally and vertically. I have seen the solutions to similar question but couldn’t solve my problem. Please also share good resources from where I can learn about the positioning i.e relative absolute in depth.

Below is my HTML code:

<!DOCTYPE html>
<style type="text/css">
    .outer {
        color:black;
        width: 400px;
        height:400px;
        border: 100px solid;
        border-radius:100%;
        border-color: red blue green yellow;
        position: static;
        margin: auto  auto auto auto;
        top:50%;
    }
    .inner{
        color:black;
        width: 100px;
        height:100px;
        border: 50px solid;
        border-radius:100%;
        border-color: red transparent green transparent;
        position: relative;
        top:50%;
        margin: -50px auto auto auto;
    }
</style>
<html>
    <body>
        <div class="outer">
            <div class="inner">
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IF you know the sizes of both boxes, and they won’t change, you can use this:

    .outer {
  color:black;
  width: 400px;
  height:400px;
  border: 10px solid;
  border-color: red blue green yellow;
  position: absolute;
  margin: -200px  auto auto -200px;
  top:50%;
  left: 50%;
}
.inner{
  color:black;
  width: 100px;
  height:100px;
  border: 5px solid;
  border-color: red transparent green transparent;
  position: absolute;
  top:50%;
  left: 50%;
  margin: -50px auto auto -50px;
}​

    Note I took out the border radius and narrowed the border size to make the point clearer.

    Basically, you can use absolute positioning with relative units (%), but use a fixed negative margin that is half the size of the box.

    See the JS Fiddle

    • 0