CSS 居中专项讲解

CSS 居中专项讲解

本文样例采用html标签不被CSDN支持，请访问 https://docs.ceynri.cn/notes/css/centering.html 阅读本文

对于 CSS 新手来说，居中效果绝对是能排上前几的新手常见难题。

对于不同类型的元素的性质认识不够深刻，又常常在搜索解决方法时没能准确描述自己想要居中的元素的类型，导致出现诸如文本对齐的方法用在块元素上的错误。

关于居中的属性实在不算少，故分清不同情况来设置不同的属性是非常重要的一步。

内容预览

按情景分类：

• 水平居中
  • 内联元素
  • 块元素
  • 多个内联块元素
• 垂直居中
  • 内联元素
  • 块元素
  • 多个元素
  • 在行中
• 水平垂直居中

按方法分类：

• 水平居中
  • text-align
  • auto-margin
  • [flex] justify-content
• 垂直居中
  • padding
  • line-height
  • absolute & -margin | transform
  • [flex] & auto-margin
  • [flex] align-item
  • [flex] flex-direction & justify-content
  • [flex] align-content (wrap)
  • [table-cell] vertical-align: middle
• 水平垂直居中
  • [grid] auto margin

 

::: warning 显示问题?

一些对于在 markdown 内嵌 HTML 支持较差的编辑器（如 github）会影响本文示例的正常显示，建议点击此处阅读本文。

:::

::: tip

文中所列出的 CSS 样式并非效果的所有样式，如发现实现的效果有出入可以直接右键查看本页面对应示例的源码（示例的样式全部内嵌于HTML标签中）。

:::

水平居中

<