居中问题 relative absolute和 float

1.position：relative和position：absolute都可以激活left、top、right、bottom和z-index属性（默认情况是不激活的，设置了也是无效的），在默认情况下， 所有元素都是在z-index：0这一层，这就是所谓的文档流 。

当设置relative和absolute时，元素其实会浮起来，即z-index大于0，

不同的是relative会保留自己在z-index：0中的占位；而absolute会完全脱离文档流。

absolute的left、top之类的属性是相对于自己最近的一个设置了relative或者absolute的祖先元素，如果找不到，则相对于body。

2.float也是可以改变文档流的，但是它不会让元素浮起到另外一个z-index层，它让元素仍然保持在z-index：0层，

它是无法通过left、right属性来准确控制元素坐标的，

而是通过float：left或者float：right控制元素在同层的左浮动或者右浮动。

同时，float会改变正常的文档流排列，影响到周围元素。

3.还有一个很明显的区别，

你可以去firbugf12验证一下：

ansolute和float会隐式改变元素的display属性类型，无论什么类型的元素（除了display：none），只要设置了position：absolute或者float：left，元素都会以display：inline-block的方式显示（即可以设置长宽，默认宽度不满足父元素），

而position：relative不会改变display属性。

relative参照父级的原始点定位

absolute参照浏览器定位

居中的方式水平居中

1.

 父级    text-align：center       （行内元素）

 子集    div设置display：inlin-block也可以居中

2.加入table标签（不定宽块状） table标签长度自适应性 不定义长度 也不默认父元素长度 长度根据文内文本长度决定

子集display：block（设置宽度）或display：table； （table可以让内容自适应不用设置宽度）

margin：0 auto (定宽块状元素)

.child{
    display: table; //display: block;
    margin: 0 auto;
}

3.chlid    . margin-left:50%; left:-25px;position:relative;（不定宽块状元素）

5.  child  设置inline（不定宽块状） margin padding 0 消除距离

嵌套div

在父级居中

在页面居中

1.   父子级都不定宽

父级：position:relative left:50%; float ：left；不定宽             

子集  position:relative   left:-50%不定宽

子集不加relative  子集在父级无法移动

父级不加float  子集的宽度就会自适应父级 变成块状普通div

嵌套div

在父级居中

在页面居中

2.父级定宽或者不定宽（）  不管父级定宽或者不定宽都可以使用 

子集 定宽 不能够自适应

子集   position:relative    margin- left：50% ；   left：负的子集宽度一半；

           或  position:relative   margin-left：负的子集宽度一半； left：50%

子集自适应 但是兼容性差

由于transform这一属性在设置百分比类型的值时，其参照对象是自身，因此只需要各设置50%，就能实现往水平方向偏移自身宽度的一半，又或者是往垂直方向偏移自身高度的一半。 总体来说，这个方案灵活是够灵活的了，但是transform的兼容性堪忧，移动端还好说，PC端怎么敢用？

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

子集在页面居中

3.子集定宽 父级定宽或者不定宽

父级：position:relative left:50%; （如果不float父级占据页面一半 浮动根据子集自适应）

子集 marigin-left：负子集一半宽度     width:?px; margin0 padding0

或者psition：relative； left：负的子集一半宽度

垂直居中

1.垂直居中

跟 inline-block方案 很相像，都是利用了文本排版的特性，但差别在于，本方案并不需要把child设置为inline-block也可生效。

.parent{
    display: table-cell;
    vertical-align: middle;
}

2.line height      height

文本式终极居中： inline-block + text-align + table-cell + vertical-alig

如果不加table cell 不会垂直居中（div 文字都是）即使设置了inlineblock也不

.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}