📅 最后修改于: 2023-12-03 15:13:17.976000 🧑 作者: Mango
在 HTML 中，我们经常需要对元素进行居中对齐，比如居中对齐文字、图片、甚至整个页面。
HTML 提供了多种方式来实现居中对齐。下面介绍其中最为常用的方式：
对于单行文字，我们可以使用 text-align 属性来实现居中对齐：
<p style="text-align:center;">这是一行居中对齐的文字</p>
而对于多行文字，我们可以使用 display 和 margin 属性来实现：
<div style="display:flex;justify-content:center;">
<p style="margin:0;">这是一行居中对齐的文字</p>
</div>
类似文字，对于图片的居中对齐，我们同样可以使用 text-align 属性实现：
<div style="text-align:center;">
<img src="image.jpg" alt="图片" />
</div>
对于元素的居中对齐，我们可以使用 margin 和 text-align 属性来实现。
例如，让 div 元素水平居中对齐，我们可以这样写：
<div style="margin:0 auto;text-align:center;">
这个 div 元素水平居中对齐
</div>
对于整个页面，我们通常使用 margin 和 text-align 属性来实现居中对齐。
如果页面是通过固定宽度的容器进行包裹的，那么我们可以这样写：
<div style="width:600px;margin:0 auto;text-align:center;">
整个页面在屏幕中央水平垂直居中
</div>
而如果页面不使用容器包裹，我们可以使用 HTML5 中的 flexbox 或 Grid 布局实现：
<body style="display:flex;justify-content:center;align-items:center;">
整个页面在屏幕中央水平垂直居中
</body>
以上就是 HTML 中居中对齐的常用方式，以及实现方式的介绍。