css 水平垂直居中方案

水平居中

1.宽度确定的块级元素

方法一：width和margin的实现，margin：0 auto

方法二：绝对定位 和 margin-left: -width/2, 当然父元素position： relative

2.宽度未确定的块级元素

方法一：inline-block实现水平居中。display：inline-block和text-align：center

方法二：flex布局。父元素display：flex 子元素设置margin: auto 实现自适应居中

 

 垂直居中

方法一： line-height实现居中，适合纯文字

方法二： flex布局，display:flex 和 子级设置margin: auto实现自适应居中

方法三： 父级设置相对定位，子级设置绝对定位，标签通过margin实现自适应居中

方法四：父级设置相对定位，子级设置绝对定位，通过transform位移实现

 

水平垂直居中

方法一：绝对定位+transform， absolute + transform位移

方法二：flex布局，flex + justify-content + align-items