Html 如何使用Flexbox布局垂直居中旋转文本？

如何使用flexbox布局垂直居中旋转文本？我想要这样的东西：

以下是我目前掌握的情况：

html，正文{高度：100%；}
正文{背景色：#efefef；}
正文>div{
对齐内容：居中对齐；
背景色：白色；
边框：1px纯黑；
显示器：flex；
身高：100%；
宽度：25px；
}
正文>div>div{
弹性：1；
变换：旋转（-90度）；
}

我去哪里了？

您可以通过更改代码中的一些内容来实现这一点：

给你的文本一个

空白：nowrap

给你的包含div a

justify content:center

在包含div中，将

align content

更改为

align items

html，正文{高度：100%；}
正文{背景色：#efefef；}
正文>div{
对齐项目：居中；
证明内容：中心；
背景色：白色；
边框：1px纯黑；
显示器：flex；
身高：100%；
宽度：25px；
}
正文>div>div{
空白：nowrap；
变换：旋转（-90度）；
}

我去哪里了？

添加

空白：nowrap

并使用以下命令水平和垂直居中：

align-items: center;
justify-content: center;

（而且您不需要

flex:1

！）

还删除了浏览器边距并添加了

框大小：边框框

，以添加收尾处理

请参见下面的演示：

*{
框大小：边框框；
}
html，
身体{
身高：100%；
保证金：0；
}
身体{
背景色：#EFEF；
}
正文>div{
背景色：白色；
边框：1px纯黑；
显示器：flex；
身高：100%；
宽度：25px；
对齐项目：居中；
空白：nowrap；
证明内容：中心；
}
正文>div>div{
变换：旋转（-90度）；
}

我去哪里了？

谢谢你，亨特@库库兹在回答问题上几乎比不上你，所以我接受他的意见，投你的一票。谢谢。其实我先发了我的，哈哈。但那很好：）@MattPowell-ya，实际上他比我先到了。。。你可以慷慨地投票：）哈哈，我会给你一些爱@kukkuz；D+1也将其重新旋转：）