CSS中的居中操作

本文首发于个人博客： https://youngjuning.js.org/

居中的效果是Web开发中常见的需求，几乎和阴影、圆角可以并列为产品三大法宝，本文的目的是捋顺开发中常用的居中计较，方便记忆和日后查阅。为了方便演示，本文所有 demo 使用 React 的 CSS-in-JS 语法完成。

单行文本

height、lineHeight、textAlign

  单行文本

Flex

  单行文本

多行文本居中

table-cell、vertical-align

  多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本

Flex

  多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本

图片居中

table-cell、verticalAlign、textAlign

Flex

块级元素

子绝父相

Flex