2.布局解决方案- 水平布局<1>

居中布局

水平布局
写出两个盒子并满足以下条件条件：
1.里面的宽度盒子不固定
2.外面盒子的宽度不固定

第一种解决方案 inline-block+text-align

    
    
    



    
DEMODEMODEMO

这种解决方案兼容性好，但是son也会继承居中，单独设置文字单独设置他的对齐方式
第二种方式 display:table+margin

    
    
    



    
DEMODEMODEMO

display: table;的元素是块状元素，但是宽度是跟着内容走。这是不同于其他的块状元素
display: table;兼容性不是很好，改成以下方式解决
第二种方式2 用table布局方式

    
    
    



    

           

               
我是第一个
           
    

第三种方式absolute+transform

    
    
    



    
我是一段文字

这种方式的优点就是子元素脱离文档流不会对别的元素产生影响，缺点是transform兼容性不好
第四种方式

    
    
    



    
我是一段文字

当父元素设置display:flex;的时候 flex item的宽度默认就是auto,优点很明显就是不用设置son元素，当然也可以设置son元素margin:0 auto;
确定，兼容性不好。