妈妈再也不用担心我的布局了----总结最常用的css水平和垂直布局,

水平居中:
    行内元素:0 .父元素:text-align:center
    确定宽度:
    1.父元素:position:relative,子元素:position:absolute;left:0,margin-left:-子元素宽/2
    2.margin:0 auto
   不确定宽度
    1.flex   :justify-content:center
    2.子元素:position: absolute;transform: translateX(-50%);left: 50%;
    3.子元素:display:inline-block;父元素:text-align:center(和行内元素原理一致)
    4.使用table标签或者使用display:table,margin: 0 auto;

垂直居中:

    1.文字类:使用line-height
    2.同1,父元素:position:relative,子元素:position:absolute;top:0,margin-top:-子元素宽/2
    3.flex布局:父元素:display:flex,子元素:margin:auto(水平垂直居中)或者:align-items:center
     4.子绝父相，标签通过margin实现自适应居中
    5.子绝父相,子标签通过transform
    6.table布局，父级通过转换成表格形式，然后子级设置vertical-align实现。
   （需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。
额外:
绝对定位,绝对居中
子元素:
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100px;
    width: 100px;
父元素如果设置宽高和相对定位:则在父元素上绝对居中

额外:如果父元素设置为flex ,子元素的float、clear和vertical-align属性将失效