HTML5中实现元素垂直水平居中的五种方法：一、Flexbox（推荐），设父容器display: flex，justify-content: center，align-items: center；二、Flexbox居中内联内容；三、text-align与line-height组合（仅单行文本）；四、绝对定位+transform；五、CSS Grid布局。
如果您希望在HTML5中实现元素的垂直与水平居中，常见做法是利用Flexbox布局或结合text-align与line-height等传统方式。以下是几种可行的方法：
一、使用Flexbox实现块级元素垂直水平居中
Flexbox是HTML5中推荐的现代布局方案，通过设置容器为flex显示，并调整主轴与交叉轴对齐方式，可精准控制子元素居中。该方法适用于任意尺寸的子元素，且无需预知其宽高。
1、将父容器的display属性设为flex。
2、设置justify-content为center，使子元素沿主轴（默认为水平方向）居中。
立即学习“前端免费学习笔记（深入）”；
3、设置align-items为center，使子元素沿交叉轴（默认为垂直方向）居中。
4、确保父容器具有明确的高度，例如设置height: 100vh，以占据视口全高。
二、使用Flexbox实现单行内联内容（如文字）居中
当仅需居中纯文本或行内元素时，可在父容器启用flex后，将子元素保留为默认display: inline或inline-block，此时justify-content和align-items仍有效。该方式避免了block元素换行干扰，适合标题、按钮文字等场景。
1、为包含文字的父元素添加display: flex样式。
2、添加justify-content: center与align-items: center声明。
3、移除子元素可能存在的margin、padding或white-space异常设置，防止偏移。
4、确认父元素高度不为0，可通过min-height或height显式设定。
三、使用text-align与line-height组合居中单行文字
对于仅含单行文本的容器，可通过text-align控制水平居中，再用line-height匹配容器高度实现视觉垂直居中。该方法轻量、兼容性好，但仅适用于固定高度且单行文本场景。
1、设置父容器width和height为确定值，例如width: 300px; height: 80px;
2、添加text-align: center使文字水平居中。
3、设置line-height等于容器height，例如line-height: 80px;
4、为防止换行，可追加white-space: nowrap; 和 overflow: hidden;
四、使用绝对定位配合transform居中任意元素
该方法不依赖flex，适用于需兼容较老浏览器或嵌套在非flex容器中的情况。原理是将元素设为绝对定位，偏移50%，再用transform反向移动自身宽高的50%，从而抵消尺寸影响。
1、为父容器设置position: relative，建立定位上下文。
2、为目标元素设置position: absolute; top: 50%; left: 50%;。
3、添加transform: translate(-50%, -50%); 实现精确回退。
4、确保目标元素无影响定位的margin或浮动，必要时设margin: 0;
五、使用CSS Grid实现居中
CSS Grid提供更灵活的二维布局能力，通过定义容器为grid并指定对齐策略，可一步完成垂直与水平居中，且支持多子元素统一控制。
1、将父容器display设为grid。
2、设置justify-content为center，控制列方向居中。
3、设置align-content为center，控制行方向居中。
4、若仅有一个子元素，亦可直接对其应用justify-self和align-self为center。
5、为保障Grid生效，父容器需有明确尺寸，如height: 100vh;
