How can I vertically center rotated text using Flexbox layout? - html

Question

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>

Answer 1

Add white-space: nowrap and center horizontally and vertically using:
align-items: center;
justify-content: center;
(and you don't need the flex: 1!)
Also removed the browser margin and added in box-sizing: border-box to add the finishing touches.
See demo below:
* {
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>

Answer 2

You can accomplish this by changing a couple things in your code:
Give your text a white-space: nowrap;.
Give your containing div a justify-content: center;.
In your containing div, change align-content to 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>
*Note You can also remove flex: 1; from your inner div, as it is not doing anything.