Have a centered label fill the whole parent div

I am using labels to check/uncheck hidden checkboxes. I need to be able to click anywhere within the div AND for the label to be centered within that same div.

Here is my html :

<div id="syllabe" class="container">
  <div id="syllabe-1" class="syllabe-container"><label for="toggle-syllabe-1">1</label></div>
  <div id="syllabe-2" class="syllabe-container"><label for="toggle-syllabe-2">2</label></div>
  <div id="syllabe-3" class="syllabe-container"><label for="toggle-syllabe-3">3</label></div>
  <div id="syllabe-4" class="syllabe-container"><label for="toggle-syllabe-4">4</label></div>
  <div id="syllabe-5" class="syllabe-container"><label for="toggle-syllabe-5">5</label></div>
</div>
<div id="syllabe2" class="container">
  blabla2
</div>
<div id="syllabe3" class="container">
  blabla3
</div>
<div id="syllabe4" class="container">
  <input type="checkbox" id="toggle-syllabe-1" onclick="toggle(this)">
</div>

CSS :

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
}

#syllabe {
  display: grid;
  grid-auto-flow: column;
}

.container {
  border: 1px solid black;
}

.syllabe-container {
  font-size: xx-large;
  background-color: aqua;
  border: 1px solid red;
}
.syllabe-container-selected {
  font-size: xx-large;
  background-color: yellow;
  border: 1px solid black;
}

#syllabe3 {
  height: 200px;
}

label {
  display: block;
}

and JS (using JQuery) :

let toggle = (checkbox) => {
  if (checkbox.checked) {
    $("#syllabe-1").removeClass("syllabe-container").addClass("syllabe-container-selected")
  } else {
    $("#syllabe-1").removeClass("syllabe-container-selected").addClass("syllabe-container")
  }
}
$(function() {

})

And the result :

And after clicking exactly on the 1 :

How could I center (vertically and horizontally) the number 1 and be able to click anywhere within the yellow zone to activate the checkbox ?

Using margin: auto; on the container reduces the label active space and does not achieve what I want :

Here is a jsFiddle containing everything.