L - 居中布局

水平居中

先给出HTML结构

    <div class="par">
        <div class="child">我是子元素</div>
    </div>

方法1. 将子元素转换为行内元素

    .par{
        text-align: center;
    }
    .child{
        background-color: tomato;
            
        display:inline-block;
    }

将子元素设置为inline-block这样既可以像块元素一样设置盒模型，又可以像行内元素一样试用text-align：center进行居中

将子元素设置为inline-block后，子元素为块级元素，宽度为内容宽度

方法2. 将子元素转换为table

    .par{

    }
    .child{
        background-color: tomato;
            
        display:table;
        margin:0 auto;
    }

table元素是块级元素，宽度自适应为内容宽度，所以通过display:table对子元素进行转换并设置块元素居中标配margin:0 auto

方法3. 使用position+transform组合

    .par{
        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        transform: translateX(-50%);
    }

由于子元素是个块级元素(div)，默认占满父元素宽度，所以我们将子元素宽度设为300px

原理很简单，先用绝对定位将子元素置于距父元素左边界一半的位置，然后再将子元素向左移动自身的一半，达到居中效果

注意，position:relative将父元素设为子元素绝对定位的参照物

方法4. 利用flex布局的justify-content

    .par{
        display:flex;
        justify-content: center;
    }
    .child{
        background-color: tomato;
    }

由于flex-grow属性默认值为0，flex-basis属性默认值为auto，所以宽度为内容宽度(在没有设置指定值时，否则为指定值)

顺便说一句，flex很强大

垂直居中

高度为元素高度，就不指定具体值了

方法1. 父元素转换为table-ceil

    .par{
        height:500px;

        display:table-cell;
        vertical-align:middle;
    }
    .child{
        background-color: tomato;
    }

子元素宽度为内容宽度，父元素宽度为子元素宽度

方法2. 利用position+transform组合

    .par{
        height:500px;

        position: absolute;
    }
    .child{
        background-color: tomato;
        width:300px;
        
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }

不指定子元素宽度的话，子元素的内容将纵向展示

方法3. 使用flex布局的align-items

    .par{
        height:500px;

        display:flex;
        align-items:center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

水平垂直居中

上述两种居中布局的结合

方法1. 使用inline-block+text-align+table-cell+vertical-align

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        background-color: tomato;
        width:300px;

        display:inline-block;
    }

方法2. 利用position+transform组合

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

方法3. 使用flex布局

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        display:flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

有问题欢迎提问，实践出真知