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

问题描述

如何使用flexbox布局垂直居中旋转文本?我想要看起来像这样的东西:

How can I vertically center rotated text using flexbox layout? I want something that looks like this:

这是我到目前为止所拥有的:

Here's what I have so far:

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>

推荐答案

添加空白:nowrap 并使用以下命令水平和垂直居中:

Add white-space: nowrap and center horizontally and vertically using:

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

(而且您不需要 flex:1 ！)

还删除了浏览器的空白，并在 box-sizing:border-box 中添加了画龙点睛的内容.

Also removed the browser margin and added in box-sizing: border-box to add the finishing touches.

请参见下面的演示

* {
  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布局垂直居中旋转文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！