居中布局:水平居中 + 垂直居中 + 水平垂直居中

布局:水平居中 + 垂直居中 + 水平垂直居中

本文主要是通过代码来理解元素居中布局的实现。

知识回顾:

    dispaly 属性

    用  法:规定元素应该生成的框的类型。

    属性值:

    block: 元素将显示为块级元素,元素默认的宽度是父元素的宽度,可以设置宽高,起始位置换行显示
           默认display属性值为block的元素有:div, p, h1-h6, ul, form, ...

    inline: 默认宽度为内容的宽度,不可以设置宽高,元素会在同一行显示。
            默认display属性值为inline的元素有:span, a, label, cite, em, ...

    inline-block: 默认宽度为内容的宽度,可以设置宽高,元素会在同一行显示,换行的话是一整块换行。
            默认display属性值为inline-block的元素有:input, textarea, select, button, ...

    none: 元素不显示。

    table: 元素会作为块级表格来显示(类似 ),表格前后带有换行符。

    inline-table:此元素会作为内联表格来显示(类似 
),表格前后没有换行符。 table-cell: 元素会作为一个表格单元格显示(类似
) inherit:从父元素继承 display 属性的值。

html代码:

    <div class="parent">
        <div class="child">Horizontal center - Vertical centerdiv>
    div>

css样式:

1、水平居中( 5 种方式 )

代码中设置boder属性纯属用于结果效果显示直观,可以删除

        /* 方法一: inline-block + text-align */
        .parent{
            border:1px solid red;
            text-align: center;
        }
        .child{
            border:1px solid blue;
            display: inline-block;
        }


        /* 方法二:table + margin   */
        .child{
            border:1px solid blue;
            display: table;
            margin: 0 auto;
        }


        /* 方法三:absolute + transform */
        .parent{
            border:1px solid red;
            position: relative;
        }
        .child{
            border:1px solid blue;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }


        /* 方法四:flex + justify-content */
        .parent{
            border:1px solid red;
            display: flex;
            justify-content: center;
        }


        /* 方法五:flex + margin */
        .parent{
            border:1px solid red;
            display: flex;
        }
        .child{
            border:1px solid blue;
            margin: 0 auto;
        }

2、垂直居中( 3 种方式 )

        /* 方法一:table-cell + vertical-align */
        .parent{
            height:500px;
            border: 1px solid red;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            border: 1px solid blue;
            width:100%;
        }


        /* 方法二:absolute + transform */
        .parent{
            height:500px;
            border: 1px solid red;
            position: relative;
        }
        .child{
            position: absolute;
            border: 1px solid blue;
            top: 50%;
            transform:translateY(-50%);
        }

        /* 方法三:flex + align-items */
        .parent{
            height:500px;
            border: 1px solid red;
            display: flex;
            align-items: center;
        } 

3、水平垂直居中( 3 种方式 )

        /* 方法一:text-align + table-cell + inline-block */
        .parent{
            width:500px;
            height:500px;
            border: 1px solid red;
            text-align: center;         /*水平居中*/
            display: table-cell;        /*垂直居中*/
            vertical-align: middle;
        }
        .child{
            border: 1px solid blue;
            display: inline-block;
        }

        /* 方法二:absolute + transform */
        .parent{
            width:500px;
            height:500px;
            border: 1px solid red;
            position: relative;
        }
        .child{
            border: 1px solid blue;
            position: absolute;
            left: 50%;                  /*水平居中*/
            top: 50%;                   /*垂直居中*/
            transform: translate(-50%, -50%);
        }

        /*方法三:flex + justify-content + align-items */
        .parent{
            width:500px;
            height:500px;
            border: 1px solid red;
            display: flex;
            justify-content: center;    /*水平居中*/
            align-items: center;        /*垂直居中*/
        }
        .child{
            border: 1px solid blue;
        }

此外,还可以结合5种水平居中布局 + 3种垂直居中布局,得到更多的水平垂直居中布局。

你可能感兴趣的:(CSS)