一.水平居中
1.文字水平居中
2.盒子居中
5.垂直居中
1.元素是display:block和display:inline-block都可以使用height:100px ,line-height:100px;
2.利用display:table-cell
3.用flex布局
4.块级元素固定高度(这个应该是大家最熟悉的,例子就不放了)
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; }
5.不知高度
transform: translate(50px,100px);
-ms-transform: translateY(-50%) /* IE 9 */ -webkit-transform: translateY(-50%) /* Safari and Chrome */ -o-transform: translateY(-50%)/* Opera */ -moz-transform: translateY(-50%); /* Firefox */
三,水平居中,垂直居中
1.固定宽高的水平垂直居中(大家熟悉的)
parent {
position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
2.不知宽高-水平垂直居中
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3.flex布局(上面水居中和垂直居中有例子就不写了)
.parent { display: flex; justify-content: center; align-items: center; }
4.利用grid实现水平垂直居中,兼容性较差,不推荐。
.parent { height: 140px; display: grid; } .child { margin: auto; }
5.弹窗的水平居中(截图不好放,就不放了,大家粘贴就可以运行)
大家有好的方法就留言哈
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论