フレックスボックスレイアウトを使用して、回転したテキストを垂直方向にセンタリングするにはどうすればよいですか？

Question

フレックスボックスレイアウトを使用して、回転したテキストを垂直方向にセンタリングするにはどうすればよいですか？

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とセンターを追加します。

下記を参照のデモ：

* { 
 
    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

は、あなたがあなたのコード内のカップルの事を変更することでこれを実現することができます

ここ

は、私がこれまで持っているものだ。私はこのようになります何かをしたいです：

1. 内線番号white-space: nowrap;。
2. あなたの担当ディレクターにjustify-content: center;を渡してください。
3. あなたの担当ディビジョンで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;を削除することができます。

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

を（そして、あなたはflex: 1は必要ありません！）

はまた、ブラウザのマージンを取り除き、最後の仕上げを追加する box-sizing: border-boxに追加：