DIV水平垂直居中方法汇总

@DIV水平垂直居中方法汇总

DIV水平垂直居中方法汇总

1、定位（子元素绝对定位，父元素相对定位），子元素的top和left值都设为50%，再让子元素往回走自身宽度和高度的一半。这里往回走一半可以有两种方式，通过margin或者translate都可以移动。
（1）通过margin的方式

这种方式的缺点在于我们需要知道当前子元素的宽高。
（2）通过translate的方式

通过以上两种方式均是让子元素移动自身的一半，如下图

2、定位（子元素绝对定位，父元素相对定位）绝对定位下top left right bottom都设置为0，通过margin为auto来实现。

3、通过display: flex的方式
（1）给父元素设置flex属性，控制父元素justify-content和align-items来让子元素在主轴和侧轴居中。

这种方式会使父元素里面的所有子元素包括文字均会居中，不能设置单个子元素的居中。例如下图

（2）给父元素设置flex属性，给子元素加margin：auto，这种方式不会让文字元素也居中。



4、通过display:table-cell的方式
（1）给父元素设置display:table-cell，再添加vertical-align：middle作垂直居中，水平居中通过text-align的方式，这种方式需要子盒子是行内盒子或者子元素是文本类元素，例如：


这种方式会让父盒子里面的所有元素都居中。
（2）在上一中方式的基础上将子元素添加margin:auto,