How can I center these :before elements without using magic numbers?

Question

I'm making a connect four game. Right now every div.slot has a :before element on it. This represents the cut out circle in each slot. I have the top: and bottom: property set to 7px to center it. How would I do it without these random numbers? I tried setting left,right,top,bottom to 0. This does nothing though. Any help would be sweet. Thx:)

const board = document.querySelectorAll(".slot");

for(let i = 0; i < board.length; i++) {
 board[i].addEventListener('click', selectColumn);
}

function selectColumn(evt) {
 let column = evt.target.id;
 let columnArray = [];

 for(let i=0; i < board.length; i++) {
  if(column === board[i].id) columnArray.push(board[i]);
 }
 dropChip(columnArray);
}

function dropChip(col) {
 for(let i = col.length-1; i >= 0; i--) {
  if(!col[i].classList.contains('filled')) {
   col[i].classList.add('filled');
   break;
  }
 }
 console.log(col);
}

/** {
 border: 1px solid red;
}*/

*, *:before, *:after {
 box-sizing: inherit;
}

html {
 box-sizing: border-box;
}

html, body {
 margin: 0;
 padding: 0;
}

body {
 display: flex;
 justify-content: flex-end;
 min-height: 100vh;
 background-color: #e6e9ef;
 flex-direction: column;
}

.board-wrapper {
 /*display: flex;*/
 margin: 0 auto;
 padding-top: 100px;
 position: relative;
 overflow: hidden;
}

.board {
 display: flex;
 background-color: #00c;
 /*background: #0000cc;*/
 flex-wrap: wrap;
 max-width: 706px;
 padding: 3px;
 /*margin: auto;*/
}

.board > div {
 width: 100px;
 height: 100px;
 background-color: blue;
 border: 3px solid #00c;
 cursor: pointer;
 position: relative;
}

.board > div:before {
 content: "";
 position: absolute;
 top: 7px;
 left: 7px;
 background-color: #00c;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 box-shadow: inset 0px 0px 13px #0606aa;

}

.board > div.counter {
 /*display: block;
 padding: 0;*/
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: auto;
 height: 100px;
 border: none;
 background-color: #e6e9ef;
 /*z-index: 100;*/
}

.board > div.counter:after {
 content: "";
 display: block;
 /*padding: 0;*/
 height: 80px;
 width: 80px;
 background-color: red;
 top: 0;
 /*left: 0;
 right: auto;*/
 border-radius: 50%;
 transition: transform .5s ease, opacity .2s ease;
 /*transform: translateX(0);*/
 z-index: 100;
 opacity: 0;
}

.board > div.counter:before {
 /*content: "";
 display: block;
 padding: 0;*/
 position: absolute;
 top: 15px;
 left: 15px;
 /*right: auto;*/
 height: 50px;
 width: 50px;
 border-radius: 50%;
 background-color: red;
 box-shadow: inset 0px 0px 20px #cc0000;
 z-index: 101;
 transition: transform .5s ease, opacity .2s ease;
 /*transform: translateX(0);*/
 opacity: 0;
}

.board > div:nth-of-type(7n+1):hover ~ .counter:after{transform:translateX(14px);opacity: 1;}
.board > div:nth-of-type(7n+2):hover ~ .counter:after{transform:translateX(114px);opacity: 1;}
.board > div:nth-of-type(7n+3):hover ~ .counter:after{transform:translateX(214px);opacity: 1;}
.board > div:nth-of-type(7n+4):hover ~ .counter:after{transform:translateX(314px);opacity: 1;}
.board > div:nth-of-type(7n+5):hover ~ .counter:after{transform:translateX(414px);opacity: 1;}
.board > div:nth-of-type(7n+6):hover ~ .counter:after{transform:translateX(514px);opacity: 1;}
.board > div:nth-of-type(7n+7):hover ~ .counter:after{transform:translateX(614px);opacity: 1;}

.board > div:nth-of-type(7n+1):hover ~ .counter:before{transform:translateX(14px);opacity: 1;}
.board > div:nth-of-type(7n+2):hover ~ .counter:before{transform:translateX(114px);opacity: 1;}
.board > div:nth-of-type(7n+3):hover ~ .counter:before{transform:translateX(214px);opacity: 1;}
.board > div:nth-of-type(7n+4):hover ~ .counter:before{transform:translateX(314px);opacity: 1;}
.board > div:nth-of-type(7n+5):hover ~ .counter:before{transform:translateX(414px);opacity: 1;}
.board > div:nth-of-type(7n+6):hover ~ .counter:before{transform:translateX(514px);opacity: 1;}
.board > div:nth-of-type(7n+7):hover ~ .counter:before{transform:translateX(614px);opacity: 1;}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Connect Four</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="board-wrapper">
  <div class="board">
   <div class="slot" id="col-1"></div>
   <div class="slot" id="col-2"></div>
   <div class="slot" id="col-3"></div>
   <div class="slot" id="col-4"></div>
   <div class="slot" id="col-5"></div>
   <div class="slot" id="col-6"></div>
   <div class="slot" id="col-7"></div>
   <div class="slot" id="col-1"></div>
   <div class="slot" id="col-2"></div>
   <div class="slot" id="col-3"></div>
   <div class="slot" id="col-4"></div>
   <div class="slot" id="col-5"></div>
   <div class="slot" id="col-6"></div>
   <div class="slot" id="col-7"></div>
   <div class="slot" id="col-1"></div>
   <div class="slot" id="col-2"></div>
   <div class="slot" id="col-3"></div>
   <div class="slot" id="col-4"></div>
   <div class="slot" id="col-5"></div>
   <div class="slot" id="col-6"></div>
   <div class="slot" id="col-7"></div>
   <div class="slot" id="col-1"></div>
   <div class="slot" id="col-2"></div>
   <div class="slot" id="col-3"></div>
   <div class="slot" id="col-4"></div>
   <div class="slot" id="col-5"></div>
   <div class="slot" id="col-6"></div>
   <div class="slot" id="col-7"></div>
   <div class="slot" id="col-1"></div>
   <div class="slot" id="col-2"></div>
   <div class="slot" id="col-3"></div>
   <div class="slot" id="col-4"></div>
   <div class="slot" id="col-5"></div>
   <div class="slot" id="col-6"></div>
   <div class="slot" id="col-7"></div>
   <div class="slot" id="col-1"></div>
   <div class="slot" id="col-2"></div>
   <div class="slot" id="col-3"></div>
   <div class="slot" id="col-4"></div>
   <div class="slot" id="col-5"></div>
   <div class="slot" id="col-6"></div>
   <div class="slot" id="col-7"></div>
   <div class="counter"></div>
  </div>
 </div>
 <script src="script.js"></script>
</body>
</html>

`top: 50%; left: 50%; transform: translate(-50%, -50%);` - see example [here](https://stackoverflow.com/questions/38892797/how-to-position-child-div-to-the-center-of-every-parents-div-using-position-abso/38892840#38892840) — kukkuz, Apr 23 '19 at 05:11
With the `top, right, bottom, left` all set to `0`, try also adding `margin: auto`. However, the `transform` by kukkuz is also a good approach. — Jack, Apr 23 '19 at 05:19
@kukkuz I don't understand this method? the left: 50% and the top: 50% push it down into the bottom right, so shouldn't the translate(-50%, -50%) put it back where it originally started? — , Apr 23 '19 at 05:51
`left: 50%` and `top: 50%` aligns the element *exactly* to the center if it is a point... `transform: translate(-50%, -50%)` shifts 50% with respect to the height and width of the element and so it is aligned to the center exactly.. — kukkuz, Apr 23 '19 at 05:53
Also, you can't use the same ID more than once.....so you'll have to fix that too! — Paulie_D, Apr 23 '19 at 12:16
Why even bother with the pseudo-element, just use a radial gradient - https://codepen.io/Paulie-D/pen/QPVmjp — Paulie_D, Apr 23 '19 at 12:39

How can I center these :before elements without using magic numbers?

0 Answers0