元素垂直水平居中
2018-06-24 01:54:13来源:未知 阅读 ()
本文地址:http://www.cnblogs.com/veinyin/p/7606390.html
1 已知宽高
1.1 定位值上下左右给0
1 /* 父盒子垂直水平居中 */ 2 .box{ 3 background-color: #cccccc; 4 height: 200px; 5 width: 400px; 6 position: absolute; 7 top: 0; 8 left: 0; 9 right:0; 10 bottom: 0; 11 margin: auto; 12 }
- 只能用于给的宽高的盒子,十分方便,笔者常用
1.2 左上角居中再拉回来
1.2.1 需要计算偏移量
1 .box { 2 position: absolute; 3 left: 50%; 4 top: 50%; 5 background-color: #cccccc; 6 width: 400px; 7 height: 200px; 8 margin-left: -200px; 9 margin-top: -100px; /* 需根据宽高计算偏移量 */ 10 }
- 需要知道宽高还得计算,笔者基本不用,嫌麻烦。。。
1.2.2 不用计算偏移量
1 .box { 2 position: absolute; 3 left: 50%; 4 top: 50%; 5 background-color: #cccccc; 6 width: 400px; 7 height: 200px; 8 transform: translate(-50%,-50%); /* 此处不用自己计算偏移量 */ 9 }
- IE不支持,一口老血。。。
2 元素宽高不确定
2.1 同1.2.2
2.2 flex以后再写个专题
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:html便民查询各个工具类实例代码分享(支持pc和移动端)
下一篇:图片下方空白
- DIV居中的经典方法 2020-06-13
- 前端CSS五中元素定位类型 2020-06-01
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
- 自学web前端达到什么水平,才能满足求职的标准? 2020-05-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash