如何將文本對齊到水平居中以及頁面底部？

Question

我想將文本水平對齊到頁面中心，也在頁面底部對齊，背景與文本對齊。 這里的文字是可變的。 如果文本的width超過屏幕尺寸的 30%，我想將文本分成更多行。

我可以將 div 對齊到中心或堅持到頁面底部，但不能同時做。 當我給absolute或fixed position ，中心對齊丟失，我必須給left: 30%向右移動。

這是 HTML

<div class="div-1">
  <div class="div-2">
    Hey this is an amazing way to do this
  </div>
</div>

這是CSS：

.div-1 {
  height: 100vh;
}
.div-2 {
  bottom: 10px;
  background-color: black;
  position: absolute;
  color: white;
  font-size: 20px;
  max-width: 30%;
}

有人可以建議這樣做的完美方法嗎？ 謝謝。

Answer 1

首先，將className更改為class 。 然后加

position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;

到.div-2

 .div-1 { height: 100vh; } .div-2 { background-color: black; color: white; font-size: 20px; max-width: 30%; position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, -50%); margin: 0 auto; }

 <div class="div-1"> <div class="div-2"> Hey this is an amazing way to do this </div> </div>

Answer 2

您應該使用盡可能少的標簽。 為了水平居中，使用 text-align:center 並確保容器的寬度為 100%。 減少文本的寬度； 為容器使用填充。

<footer>
  Hey this is an amazing way to do this
</footer>

footer {
  position: fixed; bottom: 0; left: 0;
  text-align: center; width: 100%; box-sizing: border-box;
  padding: 15px 35%; background: blue; color: white;
  text-transform: uppercase; font-weight: bold;
}

Answer 3

它應該是這樣的。 你可以像在 React 中一樣使用 className。

 .div-1 { height: 100vh; } .div-2 { bottom: 0; background-color: red; position: absolute; color: white; font-size: 20px; max-width: 30%; height: 400px; width: 300px; margin: 0 auto; text-align: center; vertical-align: middle; line-height: 400px; }

 <div class="div-1"> <div class="div-2"> Hey this is an amazing way to do this </div> </div>