### 使用内联样式
最直接的方式是在需要居中的 HTML 元素上应用 `style` 属性,并设置其CSS属性为“text-align:center”。
html
<h1 style="text-align: center;">这是个居中的标题</h1>
<p style="text-align: center;">这是一个居中的段落。</p>
这种方式将立即作用于相应的元素,使其内容水平居中。
### 利用类选择器及外部/内部CSS
为了更好的代码组织与复用性,我们通常会在外链或者嵌入的 CSS 文件里定义一个 class 用于居中文本:
**外部CSS文件 (styles.css):**
css
.center-text {
text-align: center;
}
然后,在HTML文档中标记对应的元素以引用这个class:
html
<head>
<style type="text/css">
.center-text {
text-align: center; /* 内部CSS也可以这样书写 */
}
</style>
</head>
<body>
<h1 class="center-text">这也是个居中的标题</h1>
<p class="center-text">这也同样是一个居中的段落。</p>
</body>
对于更复杂的场景,比如垂直方向上的居中或者是块级容器内的文字居中,则可能需要用到其他CSS技术例如 Flexbox 或 Grid Layout,但针对基础的文字层面的横向居中展示,“text-align”属性已经足够满足要求了。