css实现div不定宽高垂直水平居中解决方案

2018-06-24 02:22:15来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:复习HTML+CSS(8)

下一篇:Sass和Compass设计师指南 Ben Frain 中文高清PDF扫描版?