div垂直居中方式

SuperYiY2024-01-19 18:12

1、flex弹性布局：

css 复制代码

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

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

2、table-cell+vertical-align 类似td表格单元

css 复制代码

 		.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

css 复制代码

 		.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

css 复制代码

 		.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

css 复制代码

 		.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

css 复制代码

 		.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

css 复制代码

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

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