🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【CSS】文字居中基础

本文将介绍如何使用 CSS 的 text-align: center; 属性实现文本水平居中。

🔹 部分代码

<div class="text-center">
  文本将居中显示。
</div>

<style>
.text-center {
  text-align: center;
}
</style>

💻 完整代码（可直接在 HTML 中运行）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>文字居中</title>
  <style>
    .text-center {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="text-center">
    文本将居中显示。
  </div>
</body>
</html>

🧩 应用与技巧

text-align: center; 是最基础也最常用的 CSS 对齐属性之一，不仅可以让段落文字居中，对行内元素（如图片、按钮）也同样有效。

📱 响应式支持

由于该属性可适应不同屏幕宽度，非常适合用于移动端的提示文字、标题等。若要让块级元素整体居中，则需配合 margin: 0 auto; 使用。

合理使用居中对齐可以提升用户视觉集中度，但过度使用可能影响可读性。请根据用途合理搭配。

🎯 實用的置中對齊技巧

text-align: center; 是一個看似簡單但極具深度的 CSS 屬性。它不僅可應用於行內元素，還能搭配 display: inline-block; 的元素使用，因此可廣泛應用於例如導覽選單的置中等場景。

📊 多行文字的置中對齊

若要將整段文字置中，只需用 <p class="text-center"> 包住即可。不過對於長篇文字，建議加入最大寬度限制（如 max-width: 600px;），能提升閱讀體驗與版面美觀。

🖼️ 圖片與文字混排的置中

若要將圖片與說明文字置中，可使用 <figure class="text-center"> 包裹。由於圖片是區塊元素，建議搭配 margin: 0 auto; 使用較為保險。至於 <figcaption> 為行內元素，僅需 text-align: center; 即可置中。

需要注意的是，置中對齊具有「強調」的效果，若使用過多，可能導致畫面上其他重要內容無法突顯。因此建議只針對標題、重要提示等必要元素使用。而在表單中，標籤通常左對齊會更易於使用者理解。

在響應式設計中，可以考慮針對手機版將置中改為左對齊，例如使用 @media (max-width: 768px) { .text-center { text-align: left; } }，依據實際情境調整對齊方式，以確保最佳可讀性與使用體驗。

已复制！

相关模板