垂直居中方案汇总

发表于 分类于 / Changyan：

这里汇总了常见的元素居中方案。

水平居中

行内元素水平居中

核心：给父元素添加 text-align: center

块级元素水平居中

核心：子元素自身 margin: 0 auto;

多个div水平居中

传统方案

核心：父元素设置 text-align: center ，子元素设置 inline-block

Flex方案

核心：父元素 display: flex + justify-content: center + align-items: center

水平垂直居中

table自带水平垂直居中

核心：使用 table>tr>td 布局

模拟table

核心：父元素 display: table ，子元素 display: table-cell + vertical-align: middle

子绝父相 + 子元素 margin:auto

核心：子元素相对于父元素绝对定位，top、right、bottom、left 都设为0，margi设为auto

子绝父相 + 负margin

核心：子元素相对于父元素绝对定位，top、left设为50%，margin相对自身宽/高一半

子绝父相 + translate

核心：子元素相对于父元素绝对定位，top、left设为50%，此时子元素左上角在父元素中心，然后让子元素向左上角位移自身宽度的一半

Flex布局

父元素 display: flex，justify-content 和 align-items 都设为 center 实现垂直居中