如何使用HTML & CSS进行网页布局并实现文本居中？

当前效果 #

文本呈现左对齐状态，未居中显示。

期望效果 #

文本整体水平居中对齐。

要实现文本居中对齐，可采用以下几种实用方案：

方案1：用text-align属性快速实现行内内容居中 #

给包裹文本的容器添加text-align: center样式，可直接让容器内的文本、图片等行内元素水平居中：

<div style="text-align: center;">
  这是居中显示的文本
</div>

方案2：Flex布局实现灵活居中 #

如果需要同时处理块级元素的居中，或者适配复杂布局场景，使用Flex布局更灵活：

<div style="display: flex; justify-content: center;">
  这是通过Flex居中的文本
</div>

方案3：margin:auto实现块级元素居中 #

针对固定宽度的块级元素，设置左右外边距为auto，可实现水平居中：

<div style="width: 300px; margin: 0 auto;">
  这是固定宽度的居中文本
</div>

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