В CSS есть блок в блоке, в каждом есть надпись. В дочернем блоке центруется, в основном нет. Как отцентровать в CSS в зависимости от размеров?

body {
  background-color: bisque;
}

.temp {
  margin: 0;
  padding: 0;
  width: 600px;
  height: 300px;
  background-color: red;
  border: 2px solid black;
  font-size: 30px;
  text-align: center;
  /* display: flex; */
}

.name {
  margin-left: auto;
  margin-right: auto;
  width: 6em;
  text-align: center;
}

.tommer {
  padding: 0;
  margin: 0;
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  font-size: 30px;
  color: blue;
  text-align: left; /* Возвращаем пропорции значение left */
}

.temp-2 {
  padding: 0;
  margin: 0;
  width: 300px;
  height: 400px;
  background-color: green;
  border: 2px solid blue;
}

.text {
  margin: 0;
  padding: 0;
  width: 100px;
  height: 250px;
  background-color: aqua;
}

<div class="temp">
  <div class="tommer"><p>Hello!</p></div>
  <span class="name">
    <p>Hello</p>
  </span>
</div>

<br />

<div class="temp-2">
  <div class="text"></div>
</div>