博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
不确定元素宽度和高度时实现居中
阅读量:5152 次
发布时间:2019-06-13

本文共 687 字,大约阅读时间需要 2 分钟。

一、在元素高度、宽度已知时,实现水平垂直居中就很简单了

1 .position_all{2   width: 600px;3   height: 400px;4   position: absolute;5   top: 50%;6   left: 50%;7   margin-left: -300px;//width的一半8   margin-top: -200px;//height的一半9 }

二、当元素本身高度不确定时,margin-left:-50%是不行的,此时百分比不是元素本身的一半。也就是说如果百分比是相对自身就可以了,那我们可以使用css3的transform来代替margin:

1 .position_all{2   width: 600px;3   height: 400px;4   position: absolute;5   top: 50%;6   left: 50%;7   transform: translate(-50%,-50%);8 }

但transform目前兼容性不好(手机web开发可忽略)。或者这样,用margin: auto;来实现水平垂直居中:

1 .position_all{2   width: 600px;3   height: 400px;4   position: absolute;5   top: 0;left: 0;right: 0;bottom: 0;6   margin: auto;7 }

 

转载于:https://www.cnblogs.com/yiyangl/p/10130316.html

你可能感兴趣的文章
STL中的优先级队列priority_queue
查看>>
UE4 使用UGM制作血条
查看>>
浏览器对属性兼容性支持力度查询网址
查看>>
OO学习总结与体会
查看>>
虚拟机长时间不关造成的问题
查看>>
校门外的树2 contest 树状数组练习 T4
查看>>
面试整理:Python基础
查看>>
Python核心编程——多线程threading和队列
查看>>
Program exited with code **** 相关解释
查看>>
植物大战僵尸中文年度版
查看>>
26、linux 几个C函数,nanosleep,lstat,unlink
查看>>
投标项目的脚本练习2
查看>>
201521123107 《Java程序设计》第9周学习总结
查看>>
runtime的基本应用
查看>>
关于scrollTop的那些事
查看>>
Caroline--chochukmo
查看>>
算法导论笔记 第8章 线性时间排序
查看>>
利用jquery的contains实现搜索功能
查看>>
Xcode 6.2 beta 3 太难下载!下载了,不敢独享
查看>>
并发编程
查看>>