css实现div不定宽高垂直水平居中解决方案
2018-06-24 02:22:15来源:未知 阅读 ()
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~
现在我将介绍我所知道的几种用css来解决的几种方案。
1.父元素text-align:center;display:table-cell;vertical-align:middle;子元素display:inline-block;
.parent{ text-align: center; display: table-cell; vertical-align: middle; } .child{ display: inline-block; }
这个方案兼容性比较友好,完美利用了表格单元格的特性。
2.父元素position:relative;子元素position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
1 .parent{ 2 position: relative; 3 } 4 .child{ 5 position: absolute; 6 left: 50%; 7 top: 50%; 8 transform: translate(-50%,-50%); 9 }
这种方案有个兼容性问题,就是transform这个属性。不过基本也没多大问题。这种方案主要利用 了transform这个属性translate基于自身偏移。
3.父元素display:flex;justify-content:center;align-items:center;
1 .parent{ 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 }
这种方案主要利用了flex的特性,flex布局只兼容IE10+。个人觉得flex布局是未来的方向。想了解flex布局狠狠地戳这里
个人推荐第一种方案,兼容性友好虽然麻烦点。
最后附上网易学友提供的方便记住的思维导图
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
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