居中布局-网易云课堂微专业-页面架构-布局解决方案

水平布局

要求：
里外容器的宽度都是不一定的

    
DEMO

Methods ①：inline-black + text-align

优点：兼容性比较好，兼容到IE6\7浏览器
缺点：child会继承父元素属性，内容也会居中，在.child中添加text-align:left

.child{
    display: inline-block;  //特点：宽度根据内容
}
.parent{
    text-align: center; //特点：对inline元素起作用
}

Methods ②：table + margin

优点：只需要对自己设置，IE8以上浏览器都是支持的
兼容IE6\7：结构换成table

.child{
    display: table; //特点：非常像black元素，区别宽度跟着内容走
    margin: 0 auto；
}

Methods ③：absolute + transform

优点：居中的元素不会对其他元素产生影响
缺点：IE6/7/8兼容性不支持，需要加入一些私有前缀

.parent{
    position: relative; //父容器设置相对定位，编程参照物
}
.child{
    position: absolute; //特点；宽度由内容决定
    left: 50%；
    transform: translateX(-50%);
}

Methods ④：flex + justify-content

优点：只需要设置parent节点
缺点：flex，IE6/7/8不兼容

Methods 1：
.parent{
    display: flex;   //特点：宽度就变成了内容的宽度
    justify-content: center;
}

Methods 2：
.parent{
    display: flex;  
}
.child{
    margin: 0 auto;
}

垂直居中

要求：
里外容器的宽度都是不一定的

    
DEMO

Methods ①：table-cell + vertical-align

优点：兼容性比较好，兼容到IE8以上浏览器
兼容IE6\7：结构换成table

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

Methods ②：absolute + transform

优点：居中的元素不会对其他元素产生影响
缺点：IE6/7/8兼容性不支持，需要加入一些私有前缀

.parent{
    position: relative; //父容器设置相对定位，编程参照物
}
.child{
    position: absolute; //特点；宽度由内容决定
    top: 50%；
    transform: translateY(-50%);
}

Methods ③：flex + align-items

优点：只需要设置parent节点
缺点：flex，IE6/7/8不兼容

Methods 1：
.parent{
    display: flex;      //child会撑满整个容器
    align-items: center;
}

Methods 2：
.parent{
    display: flex;  
}
.child{
    margin: 0 auto;
}

居中（水平+垂直）

要求：
里外容器的宽度都是不一定的

Methods ①：inline-block + text-align + table-cell + vertical-align

优点：兼容性比较高
缺点：table-cell在低版本不支持，可以换table结构

.parent{
    text-align: center; //水平居中
    display: table-cell;     //垂直居中
    vertical-align: middle; //垂直居中
}
.child{
    display: inline-block; //水平居中
}

Methods ②：absolute + transform

优点：居中的元素不会对其他元素产生影响
缺点：IE6/7/8兼容性不支持，需要加入一些私有前缀

.parent{
    position: relative; //父容器设置相对定位，编程参照物
}
.child{
    position: absolute; //特点；宽度由内容决定
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Methods ③：flex + justify-content + align-items

优点：只需要设置parent节点
缺点：flex，IE6/7/8不兼容

Methods 1：
.parent{
    display: flex;   //特点：宽度就变成自身的宽度，高度撑满
    justify-content: center;
    align-items:center
}

总结：

所列的解决方案不一定是全的，做解决方案大致的思路：
首先，需要了解CSS里面很多属性它的值，它的一些特性
然后，对问题进行分解
最后，把这些特性与分解出来的问题做练习，这个问题可以用那些特性去实现