子元素在父元素中水平垂直居中

1. 水平居中(margin: auto;)子父元素宽度固定，子元素上设置 margin: auto; 子元素不能设置浮动，否则居中失效。

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;

             /*float: left;    !*如果设置了浮动，则自动居中就会失效。*!*/
            margin: 0 auto;
        }

 

2. 水平居中，子父元素宽度固定，父元素设置 text-align: center; 子元素设置 display: inline-block; 子元素不能设置浮动，否则居中失效。

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            text-align: center;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;
            overflow: auto;

            /*float: left;     !*如果设置了浮动，则自动居中就会失效。*!*/
            display: inline-block;
            /*display: inline;*/
            /*display: inline-flex;*/
        }

 

1. 水平垂直居中，子元素相对于父元素绝对定位，子元素top，left设置为50%，子元素margin的top，left减去自身宽高的一半。

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            position: relative;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;

            /*margin-top: 10%;      !*百分比相对于父元素*!*/
            /*padding-top: 10%;        !*百分比相对于父元素*!*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }

 

2. 水平垂直居中，子元素相对于父元素绝对定位，将子元素的top，right，bottom，left均设为0，然后设置子元素 margin: auto;

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            position: relative;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;

            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

 

3. 水平垂直居中，父元素设置 display: table-cell; vertical-align: middle;子元素设置 margin: auto;

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            display: table-cell;
            vertical-align: middle;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;
            overflow: auto;

            margin: auto;
        }

4. 水平垂直居中，子元素相对定位，top，let设为50%，transform: translate(-50%, -50%);

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;

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

 这种方式不会释放子元素在文档流中的位置

我是标题

 

5. 水平垂直居中，子元素相对于父元素绝对定位，子元素top，let设为50%，transform: translate(-50%, -50%);

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            position: relative;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;

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

 top,left百分比是相对父元素的，translate的百分比是相对自身的

我是标题

 

6. 水平垂直居中，父元素设置 display: flex; justify-content: center; align-items: center;

        div {
            width: 300px;
            height: 300px;
            border: 1px solid red;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        div p{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0;
            overflow: auto;
        }

justify-content: center; 是让所有的子元素作为一个整体居中