div垂直居中方式

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;
        }
相关推荐
贵沫末6 分钟前
React——基础
前端·react.js·前端框架
每天开心10 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry17 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9325 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子25 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982426 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug28 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo28 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js