前端进阶100集-(第一集)

谈谈你知道的居中方案有哪些，越多越好？

居中是重点也是难点，重在不管是面试还是日常工作都有涉及，难在你可能知道就那么一两个或理解不透

   方案一：css3的flex布局

假设父元素id: container 子元素id: child

    #container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

   方案二：position定位

    #container {
        position: relative;
    }
    #child {
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        rigth: 0;
        bottom: 0;
    }

or

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

   方案三：当子元素是inline 或 inline-block时

    #container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }

注：方案三如果子元素是block,可以转化成inline-block,可以设置宽高，又能居中，多好！！

   方案四：利用父元素的伪元素

    #container {
        text-align: center;
    }
    #container::before {
        content: '';
        heigth: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    #child {
        display: inline-block;
        vertical-align: middle;
    }

下集预告：函数式编程