How it comes that caret is starting at the top and not at the center?

Question

In the following code when you click the box the caret loads automatically on the top. How come, though? Only when you press enter and then delete will it be in the center as in the process of the 2nd and third image when it finally makes its way to the center. However, how to make it that once you click the box automatically it will be in the center as in the 3rd image though without hitting any keys though?

html,
body {
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  background: #f8f8f8;
  font-family: sans-serif;
}

.grid-box {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  gap: 10px;
  padding: 20px;
  background: white;
  border: 2px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cell {
  width: 80px;
  height: 80px;
  background-color: #e0e0e0;
  border: 1px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.inner:focus {
  outline: 2px solid dodgerblue;
  background-color: #eef6ff;
}

<div class="grid-box">
  <div class="cell">
    <div class="inner" contenteditable="true"></div>
  </div>
  <div class="cell">
    <div class="inner" contenteditable="true"></div>
  </div>
  <div class="cell">
    <div class="inner" contenteditable="true"></div>
  </div>
  <div class="cell">
    <div class="inner" contenteditable="true"></div>
  </div>
  <div class="cell">
    <div class="inner" contenteditable="true"></div>
  </div>
  <div class="cell">
    <div class="inner" contenteditable="true"></div>
  </div>
  <div class="cell">
    <div class="inner" contenteditable="true"></div>
  </div>
</div>

Was working with ChatGPT however it would be nice to figure out how to make it work...

Answer 1

For texts, I'd use the <input> tag instead of using a div with editable enabled -- and style the input container with background instead. please check if this solves the problem you're trying to fix.

html,
body {
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  background: #f8f8f8;
  font-family: sans-serif;
}

.grid-box {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  gap: 15px;
  padding: 20px;
  background: white;
  border: 2px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cell {
  width: 80px;
  height: 80px;
}

.inner {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
  border: 1px solid #aaa;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.inner:focus {
  outline: 2px solid dodgerblue;
  background-color: #eef6ff;
}

<div class="grid-box">
  <div class="cell">
    <input class="inner" type="text" />
  </div>
  <div class="cell">
    <input class="inner" type="text" />
  </div>
  <div class="cell">
    <input class="inner" type="text" />
  </div>
  <div class="cell">
    <input class="inner" type="text" />
  </div>
  <div class="cell">
    <input class="inner" type="text" />
  </div>
  <div class="cell">
    <input class="inner" type="text" />
  </div>
  <div class="cell">
    <input class="inner" type="text" />
  </div>
</div>

Answer 2

In .inner add :

line-height: 80px;