在另一个div中垂直对齐文本div

Question

所以我有以下几点： 1.一个文本框= tb 2.预览类型的div 3.标签将保留在用户在文本框中键入文本时更新的在文本框中键入的文本。

当用户使用react回调在文本框中键入文本时，我能够更新标签上的文本。

我无法执行的操作是： 我需要将标签垂直对齐并与其父div的中心水平对齐，并需要在0位置对齐。

因此，当用户键入而不是标签大小仅在一个方向上增加时，它应该在两个方向上都增加，从而使标签的中心与其父div对齐。

我尝试使用transform：rotate（90deg），flex，transform-origin，align-items等，似乎没有什么能满足我的需求。

父div CSS：

const BiggerDiv = styled.div`
position: relative;
display: flex`;

标签样式：

const LabelDiv = styled.div`
display: flex;
align-items: center;
justify-content:center;
alignContent: 'center';
transform: 'rotateY(90deg)';
transform-origin: left bottom;
left: 0%;
position: relative;`

React函数返回视图：

<BiggerDiv>
  <LabelDiv>
     SomeText
   </LabelDiv>
</BiggerDiv>

我想要的标签文字更少：

带有更多文本的标签，但图像标签的中心与父div的中心对齐。

Answer 1

您可以按照CSS进行操作。

.parent {
  height: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-orientation: upright;
  writing-mode: vertical-lr;
  padding: 10px;
  border: 1px solid red;
}

<div class="parent">
  LONG TEXT HERE
</div>

Answer 2

无需旋转：

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 400px;
  background: #ddd;
}

.inner {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

<div class="parent">
    <div class="inner">SOME TEXT</div>
</div>