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

Question

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

这是我目前的情况：

html, body { height: 100%; }
body { background-color: #efefef; }

body > div {
  align-content: center;
  background-color: white;
  border: 1px solid black;
  display: flex;
  height: 100%;
  width: 25px;
}

body > div > div {
  flex: 1;
  transform: rotate(-90deg);
}

<div>
  <div>
    Where did I go?
  </div>
</div>

Answer 1

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

给你的文字一个white-space: nowrap;。
给你包含 div 一个 justify-content: center;.
在你的 div 中，将 align-content 更改为 align-items。

html, body { height: 100%; }
body { background-color: #efefef; }

body > div {
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid black;
  display: flex;
  height: 100%;
  width: 25px;
}

body > div > div {
  white-space: nowrap;
  transform: rotate(-90deg);
}

<div>
  <div>
    Where did I go?
  </div>
</div>

*注意您也可以从内部 div 中删除 flex: 1;，因为它没有任何作用。

Answer 2

添加 white-space: nowrap 并水平和垂直居中使用：

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

（而且您不需要 flex: 1！）

还删除了浏览器边距并在 box-sizing: border-box 中添加以进行最后润色。

参见下面的演示：

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  background-color: #efefef;
}
body > div {
  background-color: white;
  border: 1px solid black;
  display: flex;
  height: 100%;
  width: 25px;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
}
body > div > div {
  transform: rotate(-90deg);
}

<div>
  <div>
    Where did I go?
  </div>
</div>

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

How can I vertically center rotated text using Flexbox layout?

html

css

vertical-alignment

flexbox

css-transforms