CSS样式实现水平、垂直居中的五种方法

  首先在这里提前准备好两个盒子，一个设为父级盒子，一个为子级盒子，如下图。

代码如下：

方法一：使用flex弹性布局实现。

 相关代码：justify-content:center      /* 表示水平方向的排列方式为居中 */

                   align-items:center  /* 表示交叉轴方向的排列方式为居中 */

 

方法二：使用父相子绝方式（父级设置为相对定为，子级设置为绝对定为）+动画（transform）实现。

 相关代码：

        父级：position: relative;      /* 对父级盒子使用相对定为 */

        子级：position: absolute;    /* 对子级盒子使用绝对定为 */

                   top:50%;     left:50%;

                   tranform:translate(-50%,  -50%);如果没有本行代码的话，居中的为子元素边框的顶点

 

方法三：父级元素设为表单单元格元素+vertical-align:middle实现。

 相关代码：

        父级：display: table-cell;      /* 把父级元素设为表单单元格元素 */

                   vertical-align: middle;   /* vertical-align 属性设置元素的垂直对齐方式  middle：与元素                                                           中部对齐。就是把 vertical-align:middle 放到一个单元格元                                                               素，即table的td元素中*/

        子级： margin: auto;   /* 在对子元素设置margin */

 

方法四：父级调整行高，子级设为行类块属性。

 相关代码：

        父级：text-align:center; 

                   line-height:500px;    /* 此时的行高调整为父级的变宽高度 */

        子级： display:inline-block;

                    vertical-align:middle;

 

方法五：同样的父相子绝，但是子元素的上下左右都需设为0px，在margin自适应。

 相关代码：

        父级：position: relative;  

        子级： position: absolute;

                   top: 0px;
                   bottom: 0px;
                   left: 0px;
                   right: 0px;
                   margin: auto;