縦書きレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>.parent{
  text-align: center;
}
.tategaki{
  display: inline-block;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  width: fit-content;
  top: 10vh;
  left: 25vw;
}
.tatechu{
  text-combine-upright: all;
}</style>
</head>
<body>
<div class="parent">
<div class="tategaki">
<p>この文章を縦書きにします</p>
<p>
<ruby>WEB先案内<rt>うぇぶさきあんない</rt>
</ruby>
</p>
    常識とは、<span class="tatechu">18</span>歳までに身に付けた偏見のコレクションである。
    <p>
<ruby>Albert Einstein<rt>アルベルト・アインシュタイン</rt>
</ruby>
</p>
</div>
</div>
<script>
</script>
</body>
</html>

.parent{
  text-align: center;
}
.tategaki{
  display: inline-block;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  width: fit-content;
  top: 10vh;
  left: 25vw;
}
.tatechu{
  text-combine-upright: all;
}