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

【问题标题】：How can I vertically center rotated text using Flexbox layout?如何使用 Flexbox 布局垂直居中旋转文本？
【发布时间】：2017-04-24 01:17:27
【问题描述】：

如何使用 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>

【问题讨论】：

标签： html css flexbox vertical-alignment css-transforms

【解决方案1】：

添加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>

【讨论】：

【解决方案2】：

您可以通过更改代码中的一些内容来完成此操作：

给你的短信一个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;，因为它没有做任何事情。

【讨论】：

谢谢亨特。 @kukkuz 几乎没有击败你的答案，所以我会接受他的并支持你的。欣赏它。
其实我先发了，哈哈。但这很好:)
@MattPowell 是的，实际上他打败了我......你可以慷慨地投票:)
哈哈，给你点爱@kukkuz ;D + 1
也退货了 :)