水平和垂直对齐旋转文本

Question

我已经为这个小问题挠头好几个小时了，我想将旋转的文本水平居中在 div 中，并使其垂直对齐到底部，并且所有这些都需要响应。我设法通过设置一些固定值来实现这一点，但正如预期的那样，当我调整屏幕大小时它会中断。

标题分为三部分，第三部分是包含旋转文本的部分，它应该始终水平居中并与图片底部垂直对齐。

Answer 1

最终代码片段：header {  position: relative;  height: 100vh;}.left-side {  position: relative;  width: 6.04%;  height: 76.339vh;  margin-top: 10.714vh;}.content {  position: relative;  display: inline-block;  width: 87.92%;  height: calc(100% - 10.714vh);  margin-top: 10.714vh;}.hero {  position: relative;}img {  object-fit: cover;  width: 100%;  height: 76.339vh;}.right-side {  width: 6.04%;  position: relative;  height: 76.339vh;  margin-top: 10.714vh;}.rotated {  position: absolute;  transform: rotate(-180deg);  bottom: 0;}p {  writing-mode: vertical-lr;  white-space: nowrap;  font-size: 1em;  line-height: 1em;  letter-spacing: 1px;  width: 100%;}<link href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" rel="stylesheet" /><link href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" rel="stylesheet" /><header class="pure-g">  <div class="left-side">  </div>  <div class="content">    <div class="hero">      <img src="https://i.picsum.photos/id/830/1680/855.jpg">    </div>  </div>  <div class="right-side">    <div class="rotated">      <p>Lorem Ipsum</p>    </div>  </div></header>

Answer 2

header {   position: relative;   height: 100vh;}.left-side {   position: relative;   margin-left: 5%;   height: 76.339vh;   margin-top: 10.714vh;}.content {   position: relative;   display: inline-block;   width: 87.92%;   height: calc(100% - 10.714vh);   margin-top: 10.714vh;}.hero {   width: 100%;   position: relative;   img {       object-fit: cover;       width: 100%;       height: 76.339vh;   }}.right-side {     margin-right: 5%;}.rotated { position: absolute; bottom: 10%; left: 50%; transform: translate(-50%, -50%);       p {       writing-mode: vertical-lr;       white-space: nowrap;       font-size: 1em;       line-height: 2em;       letter-spacing: 1px;       width: 100%;   }}归根结底，我不建议在需要响应式页面时使用“绝对”来定位元素。