1、flex彈性布局：

 		.father {
            width: 300px;
            height: 300px;
			display:flex;
			justify-content:center;
			align-items:center; 
        }

        .box {
            width: 100px;
            height: 100px;
        }

2、table-cell+vertical-align 類似td表格單元

 		.father {
            width: 300px;
            height: 300px;
			display:table-cell;
			vertical-align:middle;
			text-align:center;
        }

        .box {
            width: 100px;
            height: 100px;
			display:line-block；
        }

3、line-height+vertical-align

 		.father {
            width: 300px;
            height: 300px;
			line-height:300px;
			text-align:center;
        }

        .box {
            width: 100px;
            height: 100px;
			vertical-align:middle;
			display:line-block;
        }

4、absolute+transform

 		.father {
            width: 300px;
            height: 300px;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            /*平移*/
            transform: translate(-50%,-50%);
        }

5、absolute+負margin

 		.father {
            width: 300px;
            height: 300px;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            /*寬高的一半*/
            margin-left: -50px;
            margin-top: -50px;
        }

6、absolute+margin

 		.father {
            width: 300px;
            height: 300px;
            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
			left: 0;
            top: 0;
            bottom:0;
            right:0;
            margin:auto;;
        }

7、grid文章來源地址http://www.zghlxwxcb.cn/news/detail-814390.html

 		.father {
            width: 300px;
            height: 300px;
            display: grid;
        }

        .box {
            width: 100px;
            height: 100px;
            align-self: center;
            justify-self: center;
        }

到了這里，關(guān)于div垂直居中方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！