在HTML中设置元素的居中可以通过多种方式实现，包括文本、图像、块级元素等，以下是一些常用的技术方法来使内容在网页上水平或垂直居中。

文本居中

使用HTML标签

HTML提供了一些内联元素，如<center>，可以用于包裹文本使其居中显示，但请注意，<center>标签在HTML5中已被废弃，不推荐使用。

<!不推荐使用 ><center>这段文本将会居中显示</center>

使用CSS样式

通过CSS的textalign: center;属性可以将文本水平居中：

<div style="textalign: center;">  这段文本将会居中显示</div>

图像居中

使用HTML标签

对于图像，可以使用<center>标签进行包裹（再次提醒，这个方法已废弃）：

<!不推荐使用 ><center><img src="image.jpg" alt="示例图片"></center>

使用CSS样式

为图像添加CSS样式来实现居中：

<img src="image.jpg" alt="示例图片" style="display: block; margin: 0 auto;">

在这里，display: block;将图像转换为块级元素，margin: 0 auto;则设置了左右外边距自动平分，从而使图像在容器中水平居中。

块级元素居中

使用CSS的margin属性

对于块级元素，可以通过设置margin: auto;来使其在父容器中居中：

<div style="width: 50%; margin: 0 auto;">  这个DIV将在页面中居中显示</div>

这里设置了width以确定元素的内容宽度，然后margin: 0 auto;负责居中。

使用Flexbox布局

Flexbox是一个非常强大的工具，可以轻松地实现元素的居中。

<div style="display: flex; justifycontent: center; alignitems: center; height: 100vh;">  <div>这个DIV在父DIV中水平和垂直居中</div></div>

在这里，display: flex;开启了Flexbox布局，justifycontent: center;和alignitems: center;分别控制了子元素在主轴和交叉轴上的居中，height: 100vh;确保了父DIV占据了整个视口的高度。

使用Grid布局

CSS Grid布局同样可以用来居中元素：

<div style="display: grid; placeitems: center; height: 100vh;">  <div>这个DIV在父DIV中水平和垂直居中</div></div>

在这个例子中，display: grid;开启了Grid布局，而placeitems: center;是一个简写属性，用于同时在行和列上居中元素，height: 100vh;同样是为了占据全屏高度。

表格单元格内容居中

对于表格，可以直接使用HTML的属性来使内容居中：

<table>  <tr>    <td align="center">居中的单元格内容</td>  </tr></table>

或者使用CSS：

<style>  td {    textalign: center;    verticalalign: middle;  }</style><table>  <tr>    <td>居中的单元格内容</td>  </tr></table>

在这里，textalign: center;使文本在单元格内水平居中，而verticalalign: middle;使文本在单元格内垂直居中。

上文归纳

居中技术的选择取决于要居中的内容类型以及特定的设计需求，现代网页设计越来越倾向于使用Flexbox和Grid布局，因为它们不仅能够提供居中效果，还能创建复杂的响应式布局，无论选择哪种方法，请确保代码清晰、易于维护，并且考虑到跨浏览器兼容性。

喜欢本文吗？欢迎评论、关注、点赞！感谢阅读。