有四种方法可将 html 框架居中：margin: 0 auto;：使框架水平居中。text-align: center;：使框架内容水平居中。display: flex; align-items: center;：使框架垂直居中。position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);：使用 css 转换在固定尺寸框架的容器中心放置框架。
如何将 HTML 框架居中
在 HTML 中，有多种方法可以将框架居中。最简单的方法是使用margin: 0 auto;样式。
<code class="html"><div style="margin: 0 auto; width: 500px;"> 内容 </div></code>
这将使框架在水平方向上居中，无论其容器的宽度如何。
另一种方法是使用text-align: center;样式。这将使框架中的内容居中，而不是整个框架。
Flex3组件和框架的生命周期 中文WORD版
下载
在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看
立即学习“前端免费学习笔记（深入）”；
<code class="html"><div style="text-align: center; width: 500px;"> <p>内容</p> </div></code>
对于垂直居中，可以使用display: flex;和align-items: center;样式。这将使框架在垂直方向上居中。
<code class="html"><div style="display: flex; align-items: center;">
<div style="width: 500px;">
内容
</div>
</div></code>如果框架具有固定高度和宽度，还可以使用position: absolute;和top: 50%; left: 50%; transform: translate(-50%, -50%);样式。这将使用 CSS 转换将其放置在容器的中心。
<code class="html"><div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px;"> 内容 </div></code>
