css中垂直居中方式

将显示方式设置为表格，display：table-cell，同时设置vertical-align：middle

使用弹性布局flex-box设置为align-items：center

绝对定位中设置bottom：0；top：0，margin设置为auto

绝对定位中固定高度是设置top：50% ；margin-top值为高度一半的负值

文本垂直居中 line-height为高度值height

纯css实现垂直居中的几种方式

方法1：table-cell

HTML结构

<div class="box box1">

        <span>垂直居中</span>

</div>

css ：

/* 方法1 table-cell*/
            .box1 {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
/* 方法2 display: flex;*/
            .box2 {
                display: flex;
                justify-content: center;
                align-items: center;
            }

/* 方法3 绝对定位和负边距*/
            .box3 {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: #008000;
            }

.box3 span {
                position: absolute;
                width: 100px;
                height: 50px;
                line-height: 50px;
                top: 50%;
                left: 50%;
                background-color: red;
                margin-left: -50px;
                margin-top: -25px;
                text-align: center;
            }

/* 方法4：绝对定位和0 */
            .box4 span {
                width: 50%;
                height: 50%;
                background: #000000;
                overflow: auto;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }

/* 方法5：translate */
            .box6 span {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                background-color: #FF0000;
                transform: translate(-50%, -50%);
                text-align: center;
            }

            /* 这实际上是方法3的变形，移位是通过translate来实现的。 */

            /* 方法6：display:inline-block */
            .box7 {
                text-align: center;
                font-size: 0;
            }

            .box7 span {
                vertical-align: middle;
                display: inline-block;
                font-size: 16px;
            }

            .box7:after {
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
            /* 这种方法确实巧妙...通过:after来占位。 */

    /* 方法7：display:flex和margin:auto */
            .box8 {
                display: flex;
                text-align: center;
            }

            .box8 span {
                margin: auto;
            }

/* 方法8：display:-webkit-box */
            .box9{
                display: -webkit-box;
                -webkit-box-pack:center;
                -webkit-box-align:center;
                -webkit-box-orient: vertical;
                text-align: center
            }