网页居中技巧大公开！除了指定百分比，还有哪些方法可以居中显示？
作为一名孜孜不倦的小编，今天，我就来给大家大开脑洞，揭秘网页居中技巧的江湖秘笈！1. 神秘的 margin: auto 魔术曾经我们以为，居中就是要精准指定百分比，划分天地乾坤。但真相却是，只要给 margin 施个“auto”魔法，瞬间让元素在页面中自由穿梭，左右归位。用法效果div style="margin: auto;">/div让 div 乖乖在页面中水平居中，不受宽度影响2. flex
作为一名孜孜不倦的小编，今天，我就来给大家大开脑洞，揭秘网页居中技巧的江湖秘笈！
1. 神秘的 margin: auto 魔术
曾经我们以为，居中就是要精准指定百分比，划分天地乾坤。但真相却是，只要给 margin 施个“auto”魔法，瞬间让元素在页面中自由穿梭，左右归位。
| 用法 | 效果 |
|---|---|
div style="margin: auto;">/div |
让 div 乖乖在页面中水平居中，不受宽度影响 |
2. flexbox 的神奇伸展术
flexbox 就像一个瑜伽大师，能灵活地控制元素的排布方式。只要将父元素设置成 flex 布局，再给子元素定个 flex: 1; 就行。它们就会像拉筋一样自动伸展，直到填满整个空间，达到居中效果。
| 用法 | 效果 |
|---|---|
div style="display: flex;">/div |
让父元素变成 flex 布局 |
div style="flex: 1;">/div |
让子元素伸展填满父元素 |
3. 大众都爱的 justify-content: center;
顾名思义，justify-content: center; 就是让元素在指定区域内按比例居中排列。通常会搭配 flex 布局或 grid 布局使用。
| 用法 | 效果 |
|---|---|
div style="display: flex; justify-content: center;">/div |
让父元素 flex 布局，子元素水平居中 |
4. grid 布局的黑科技
grid 布局的居中大法，在于一个神秘的 align-items 属性。它能将子元素在垂直轴线上居中排列。只需要把父元素设置成 grid 布局，就能施展魔法了。
| 用法 | 效果 |
|---|---|
div style="display: grid; align-items: center;">/div |
让父元素 grid 布局，子元素垂直居中 |
5. 全能 CSS 神器：text-align: center;
text-align: center; 可谓是文本居中的超级利器。它能直接让文本在指定的区域内居中显示，告别非 text 元素的局限。
| 用法 | 效果 |
|---|---|
p style="text-align: center;">/p |
让段落文本水平居中 |
各位看官，还有哪些独家绝招？
居中技巧千变万化，欢迎各位大神分享自己的心得体会。一起集思广益，让网页布局の艺术百花齐放，美不胜收！