html 中间文本对齐

Question

大家好，我正在我的网站上创建一个目录，并希望将文本放在最中间而不是中心并且不在顶部我希望它位于文档的最中间

<center>
  <button href="#">Download!</button>
</center>

Answer 1

您可以使用以下内容：

.box {
  width: var(--box-size);
  height: var(--box-size);
  line-height: var(--box-size);
  background: red;
  color: white;
  text-align: center;
}

:root {
  --box-size: 100px;
}

<div class="box">
  Center
</div>

或者按照 flexbox 的建议：

.box {
  width: var(--box-size);
  height: var(--box-size);
  background: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

:root {
  --box-size: 100px;
}

<div class="box">
  Center
</div>

Answer 2

为您的 DOM

赋予 css 风格

.wrapper {
    display: table;
    margin: 0 auto;
}

.box {
  background-color: blue;
  color: white;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="wrapper">
   <div class="box">
       Center
   </div>
</div>

html 中间文本对齐

html middle text alignment

html

css

centering