CSS居中小记

CSS居中

以水平居中和垂直居中来分析居中方案

水平居中

1. 行类元素居中

• 父元素设置属性

text-align:center

2. 块级元素

• 定宽居中

margin: 0 atuo !important

• 不定宽居中

方案一：利用table来实现

display:table; margin:0 auto;

方案二：块级元素变为拥有行列元素特性，再设置父元素text-align属性 块级元素自身：

display:inline-block;

父元素

text-align:center;

方案三：flex布局

display:flex; justify-content:center;

方案四：利用position、left、transform

position:absolute; left:50%; transform:translateX(-50%)

知识点：

left相对parent移动的距离，transform：translateX translateY相对自身移动的距离

垂直居中

1. 文本居中

• 单行文本垂直居中

设置padding-top = padding-bottom OR line-height = height

• 多行文本垂直居中

父元素设置display:table,子元素display:table-cell;vertical-align:middle;

2. 块级元素垂直居中 方案一：利用flex布局

display:flex;align-items:center 以上样式设置在父元素上，父元素必须设置高度

方案二：宽高已知情况，利用position、top、margin设置为负值

方案三：利用position、top、transform

水平垂直居中

1. position:absolute + margin:auto
2. position:absolute + margin设置为负(需已知宽高)
3. position:absolute + transform

   left:50%;top:50%;tranform:translate(-50%,-50%)

4. flex布局

   display:flex;justify-content:center;align-items:center

5. 利用table-cell

   display:table-cell;text-align:center;vertical-align:middle;