Css居中 - 极限挑战

原创 uptown 教程 Css 645阅读 2018-08-06 17:37:42 举报

   说到居中,大部分人可能都觉得,这简直婴幼儿问题嘛,别说前端了,恐怕设计后端,都会不假思索地敲个:text-align:center; margin:0 auto;
   那么问题来了,居中,你知道吗?你真的知道吗?你确定你知道吗?你真的确定你知道吗……哈哈,我都被这鸟广告烦死了!
   那么今天,我们就一起来翻箱倒柜、温故知新!

1、文字居中,文字和图标的垂直对齐:

 暂时不表,后续会更新的。。。

2、div 水平垂直居中

主要涉及到的知识点:

计算:calc

伪类: :after

定位:

显示:

IE盒模型:

透明边框:

背景剪切:

变换偏移:

    
以下测试基于如下样式:

实际项目中,div居中,还分:已知高宽和未知高宽,以下总结了 11 种方法(未知高宽的 5 种);
方法有限,探索无穷!此文仅作抛砖引玉!

2.1、display:inline-table,空div + 透明边框(transparent) + background-clip

2.2、border-box + calc

2.3、margin

2.4、绝对定位

2.5、利用相对定义的偏移

2.6、display:table

2.7、absolute +  translate,或 absolute +  translate

* 可以自适应 .cont 未知高宽 

2.8、flex

* 可以自适应 .cont 未知高宽 

2.9、table-cell

table-cell可以垂直居中子元素

* 可以自适应 .cont 未知高宽 

2.10、佛系居中 absolute + auto

佛系居中:absolute + auto,top、left、right、bottom 都取无欲无求的 0,margin 再来个画龙点睛、轻描淡写的 auto,颇有 本来无一树,何处染尘埃的意思

* 可以自适应 .cont 未知高宽 

2.11) 、伪类 + display:inline-block

可以自适应 .cont 未知高宽 

未完待续...

评论 ( 1 )
最新评论
她让我换网名 2018-08-07 14:04:32 1F

有些需求的宽高不能定死,下期更新一下未知宽高的。

还有就是关于定位的居中 可不止你那几个....

膜拜一下