如何使用HTML实现网页内容居中对齐？

首先说明：<center>标签是HTML4的废弃标签，HTML5已不再推荐使用，所以你用它没效果是正常的。下面是几种现代且可靠的居中实现方式：

1. 文本/行内元素水平居中（text-align） #

适合让文本、图片（行内块元素）等在容器内水平居中，给父容器设置text-align: center即可：

<div style="text-align: center;">
  <p>这段文本会水平居中显示</p>
  <img src="example.jpg" alt="示例图片">
</div>

2. 块级元素自身水平居中（margin: 0 auto） #

如果要让一个块级元素（比如div、section）在页面或父容器中水平居中，需要给元素指定宽度，再设置左右margin为auto：

<div style="width: 70%; margin: 0 auto;">
  这个块级容器会在父容器中水平居中
</div>

3. Flexbox布局（适合复杂居中场景） #

Flex是现代布局方案，能轻松实现水平、垂直居中，甚至同时居中：

• 仅水平居中：

<div style="display: flex; justify-content: center;">
  <p>Flex布局下的水平居中内容</p>
  <div>块级元素也能被居中</div>
</div>

• 水平+垂直居中：

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  这段内容会同时水平和垂直居中
</div>

（注：height:100vh让容器占满视口高度，方便看到垂直居中效果）

4. Grid布局（快速实现双方向居中） #

Grid布局同样适合快速实现元素的水平垂直居中：

<div style="display: grid; place-items: center; height: 100vh;">
  内容会同时水平和垂直居中
</div>

place-items: center是align-items: center和justify-items: center的简写，一步到位。

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