我有一些html代码，如this on JSFiddle：

<!-- index.html -->
<div id="my_container">
  <p id="my_title">這是中文</p>
  <div id="my_mark"></div>
  <p id="my_text">2022-12-08 13:15</p>
</div>

下面是上面html的css代码：

#my_container {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 70%;
}

#my_title {
  text-align: center;
}

#my_mark {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  margin-top: -45px;
  margin-bottom: -10px;
}

.my_text {
  text-align: center;
  width: 200px;
}

目前，它会以下列方式显示my_title、my_mark和my_text：

如何将汉字移动到红色圆圈的上方，并垂直显示？
这是我想要达到的结果。

如何将某些属性设置为my_title，使其垂直显示并停留在红色圆圈的顶部？