div垂直居中方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了div垂直居中方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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文章来源地址https://www.toymoban.com/news/detail-814390.html

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

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