如何在网页顶部居中带边框的h1元素？

给网页顶部的h1元素添加边框后，文本及边框会完全左移至网页左侧。不想仅通过设置固定margin值实现居中（无法适配不同网页尺寸），尝试过text-align: center、align-content: center等方法无效，当前代码如下：

CSS代码 #

#title {
  color: rgb(226, 35, 35);
  display: inline;
}

.borderedTitle {
  border: 2px solid black;
  display: inline-block;
  border-radius: 10px;
  padding: 10px;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

HTML代码 #

<span class="borderedTitle">
  <h1 id="title" class="lato-bold">Title</h1>
</span>

问题根源 #

你用span包裹h1后，即便给span设为inline-block，它的父元素（默认是body）没有设置水平对齐规则，所以整个边框容器会默认左对齐。另外h1默认是块级元素，强行设为inline会破坏原有布局逻辑。

方案1：利用父元素text-align实现居中 #

这是最简单的适配方案，通过给父元素（比如body）设置text-align: center，让inline-block类型的边框容器自动水平居中：

修改后的CSS

#title {
  color: rgb(226, 35, 35);
  margin: 0; /* 清除h1默认的上下外边距，让边框和标题贴合更紧密 */
  /* 去掉display: inline，保留h1的默认块级特性即可 */
}

.borderedTitle {
  border: 2px solid black;
  display: inline-block;
  border-radius: 10px;
  padding: 10px;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* 给body设置居中规则 */
body {
  text-align: center;
}

修改后的HTML

<div class="borderedTitle">
  <h1 id="title" class="lato-bold">Title</h1>
</div>

（用div代替span更符合语义化，当然保留span也能生效）

方案2：用Flexbox布局实现居中 #

Flexbox是更现代的布局方式，不仅能轻松实现水平居中，还能按需添加垂直居中，适配性更强：

修改后的CSS

/* 给body设置Flex布局 */
body {
  display: flex;
  justify-content: center; /* 水平居中 */
  min-height: 100vh; /* 可选：让内容垂直居中，不需要可以去掉 */
  margin: 0; /* 清除body默认外边距 */
}

#title {
  color: rgb(226, 35, 35);
  margin: 0; /* 清除h1默认外边距 */
}

.borderedTitle {
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
  /* 这里不需要display: inline-block，Flex子元素会自动贴合内容 */
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

HTML结构

和原代码一致即可，无需额外修改：

<span class="borderedTitle">
  <h1 id="title" class="lato-bold">Title</h1>
</span>

内容的提问来源于stack exchange，提问作者Daniel Collis