元素在盒子里垂直水平居中？

元素在盒子里垂直水平居中？

方案一：定位

这里则就需要父容器设置为position：relative；子容器设置为positive：absolute；

设置了定位的元素就支持了上下左右（top、bottom、left、right）四个坐标。关于定位下的三种方法设置子元素居中：（假如父盒子400*400，子盒子200*200）

1. 在清除子盒子高度下设置居中： top:50%; left:50%; margin-top:-100px; margin-left: -100px;
2. 不清楚子盒子高度下设置居中：top:50%; left:50%; transform: translate( -50%, -50%);  （设置translate位移是因为仅设置top、left都为50%只是子盒子的原点即左上角在居中位置，并不是我们想要的子盒子中心的在居中位置，所以要通过设置位移的偏移来达到我们真正想要的居中）
3. 不清楚子盒子高度下设置居中：top:0; left:0; right:0; bottom:0; margin: auto;

 

方案二：弹性盒flex布局

1.方法一：父容器设置display：flex；  子容器设置margin：auto；

2.方法二：父容器设置display：flex； justify-content：center；（子元素主轴居中对齐），align-items：center；（子元素侧轴（也叫交叉轴即交叉点）居中对齐）

 

方案三：vertical-align

1.方法一：父容器设置vertical-align: middle;（垂直对齐方式），display：table-cell；（这里只能垂直居中，要水平居中还有设置text-align），text-align：center；

同时子盒子还要设置display：inline-block；（但是存在的问题是父元素转换为table-cell后，该父元素的margin-bottom就不生效了，自身的特性也会发生改变如margin：auto；也不生效了）

2.方法二：父容器设置text-align：center；line-height：400px；   

子盒子设置display：inline-block；（只有转换为内联块，text-align、line-height才生效），vertical-align：middle；（行内块独有的特性）。小解释：text-align、line-height是针对文字居中的设置，这时的子盒子或图片转化为inline-block后，是和文字的基线对齐的，所以这时还要设置行内块独有的特性vertical-align：middle；来使div或图片垂直居中对齐。

 

居中无非就是：行内、行内块元素的水平居中text-align：center。块级元素的水平居中margin：auto。单行文本的垂直居中line-height：父元素的高度。背景图的居中。定位实现元素的居中。table-cell方法实现元素的居中。弹性实现元素的居中。