0

I am trying to center the disc in the middle of the page overlapping my left and right div. The way I have found to do it is using the below code however, the disc shoots off the page to the right when I do. Please can someone help me understand why as I have googled and watched YouTube videos and they say this is how you do it. It is even working in the YouTube video but not for me. I am really stuck. 

body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
}

.left {
  width: 50vw;
  display: relative;
  background-color: #abc;
}

.right {
  width: 50vw;
  background-color: #687;
}

.disc {
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 50%;
  right: -8em;
  transform: translateY(-50%);
}
<div class="container">
  <div class="left">
    <div class="disc"></div>
  </div>
  <div class="right"></div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Holly
  • 61
  • 6

2 Answers2

0

To position a child element, the parent element need to have a position attribute (position: relative; atleast) for its childs to inherit. That is why your .disc element went off to the right.

So simply add

position: relative;

to the parent elements, the .left and .right class

I hope this helps

Aidil
  • 101
  • 1
  • 7
  • Thank you - This has worked. I realised that I had display: relative and not position: relative. I went code blind! Thank you – Holly Feb 28 '20 at 09:36
0

If I understood correctly you want to position the disc in the middle horizontaly.

If that's the case, you can use the right property in conjunction with the CSS calc function to get the desired behavior, like this:

...
.disc {
    ...
    right: calc(50vw - 8em);
    ...  
}
...

Where vw stands for viewport width and 8em is half of the disc width.

You can see the complete code here.

Fernando Ferreira
  • 51
  • 1
  • 5