html中间文本对齐

Question

嘿伙计们，我正在我的网站上创建一个目录，并希望将文本放在非中间位置，而不是位于顶部，我希望它位于文档的正中间

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

Answer 1

为您的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>

Answer 2

您可以使用以下内容：

.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>