CSS 垂直居中的方法

CSS垂直居中

针对单行行内元素：

• 设置行高line-height

用法：将line-height设置为和父元素高度一样的值，即在行内元素的上下都加行高的1/2；或直接设置父元素的高度为line-height

适用范围：“单行”的行内元素（inline、inline-block）。如果是多行，还将line-height设置为高度一样的值时，会“溢出”父元素。

• 添加伪元素

vertical-align:middle，指的是父元素内的所有元素垂直位置相互居中，并不是相对于外框的高度垂直居中，即子元素的“中心”在一条直线上。

所以，可以利用添加伪元素的方式，将伪元素的高度设置为100%，这样其他元素就会达到居中的效果。

适用范围：子元素为“单行”的行内元素（inline、inline-block）。如果是多行行内元素，会“溢出”父元素；如果是块元素，则会被“挤出”父元素

     /* 利用伪元素 */
        .box1{
            height: 200px;
            width: 500px;
        }
        .box1::before{
            content: "";
            width: 0;
            height: 100%;
             /* verticale-align是针对行内元素，所以记得要将display设置为inline-block */
            display: inline-block;
            vertical-align: middle;
        }

针对多行行内元素：

• 利用假表格和vertical-aligh属性

用法：给父元素设置disalay:table-cell和vertiacal-align:middle属性

适用范围：修改display属性时可能造成其他样式属性的连动影响，要注意。

        .box1{
            height: 200px;
            width: 500px;
            background-color: aqua;
            display: table-cell;
            vertical-align: middle;
        }

针对块元素：

• 利用假表格和vertical-aligh属性

用法：给父元素设置disalay:table-cell和vertiacal-align:mideele属性

• 使用绝对定位和transform（子元素不定高度）

用法：父元素为相对定位；子元素为绝对定位；设置transform属性：

原理：translateY，改变垂直位置，如果使用百分比为单位，则以元素本身的长宽为基准

        /* 方法五：使用定位和transform */
       .cart{
            position: absolute;
            top:50%;
            transform:translateY(-50%)
        }

• 使用绝对定位和margin-top（子元素定高度）

用法：父元素为相对定位；子元素为绝对定位；设置margin-top：

        .cart{
            height: 20px;
            position: absolute;
            top:50%;
            margin-top：-10px;
        }

• 使用绝对定位和margin:auto（子元素定高度）

原理：利用CSS的垂直布局，和绝对定位下的计算方式

        /* 使用绝对行为和margin:auto */
        .cart{
            height: 20px;
            position: absolute;
            top:0;
            bottom:0;
            margin: auto;
        }

• 使用弹性盒Flex

用法：父元素添加display:flex和align-items:center属性

        .box1 {
            width: 100px;
            height: 100px;
            /*利用弹性盒*/
            display:flex;
            align-items: center;
        }