Css居中 - 极限挑战

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

1、文字居中，文字和图标的垂直对齐：

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

 

2、div 水平垂直居中

主要涉及到的知识点：

计算：calc

伪类: :after

定位：

position:relative、absolute

显示:

display:block、inline-block、table、inline-table、table-cell、flex

IE盒模型：

box-sizing:border-box

透明边框：

border-top:50px solid transparent;
outline: 50px solid transparent;

背景剪切：

background-clip: border-box|padding-box|content-box;

变换偏移:

transform:translate(x,y)    

以下测试基于如下样式：

.box { width: 200px; height: 200px; border: 1px solid #000; margin: 0 auto}
.cont{ width: 100px; height: 100px; background: green; }

 

实际项目中，div居中，还分：已知高宽和未知高宽，以下总结了 11 种方法(未知高宽的 5 种)；

方法有限，探索无穷！此文仅作抛砖引玉！

 

2.1、display:inline-table，空div + 透明边框（transparent） + background-clip

<div class="box"><!--也可以：padding: 50px; -->				
	<div style="display: inline-table; width: 50px;"></div>
	<div class="cont" style="display: inline-table;background-color:green; background-clip:padding-box; border-top:50px solid transparent; "></div>			
	<div style="display: inline-table;width: 50px;"></div>
</div>

2.2、border-box + calc

<div class="box" style="box-sizing: border-box; width: 200px; padding:calc((200px - 100px)/2); "><!-- 或者直接： padding: 50px; -->
	<div  class="cont"></div>			
</div>

2.3、margin

<div class="box">
	<div class="cont" style=" margin: 50px auto"></div>			
</div>

2.4、绝对定位

<div class="box" style="position: relative;">
	<div class="cont" style="position: absolute; left: 50px; top: 50px;"></div>			
</div>

2.5、利用相对定义的偏移

<div class="box">
	<div class="cont" style="position: relative; left: 50px; top: 50px;"></div>			
</div>

2.6、display:table

<div class="box">
	<div class="cont" style="display: table; margin: 50px auto"></div>			
</div>

2.7、absolute +  translate，或 absolute +  translate

<div class="box" style=" position: relative;">
	<div class="cont" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></div>		
</div>

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

<div class="box" style=" position: relative;">
	<div class="cont" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></div>
</div>

 

2.8、flex

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

<div class="box" style="display: flex; flex-direction: column;
justify-content: center; align-items:center;">
	<div class="cont"></div>		
</div>

2.9、table-cell

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

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

<div class="box" style="display: table;">
	<div style="display: table-cell; vertical-align: middle; transform: translateX(50%);">
		<div class="cont" style="transform: translateX(-50%);"></div>		
	</div>
</div>

<!-- 水平居中的多种方法 --->
<!-- 或者，把.cont 设置成 inline-block，这样 text-align: center 就居中了-->
<!-- 再或者，把.cont 设置成，display: table; margin: 0 auto；-->
<!-- 还有flex 等等办法 。。。-->
<div class="box" style="display: table;">
	<div  style="display: table-cell; vertical-align: middle; text-align: center">
		<div class="cont" style="display: inline-block;"></div>		
	</div>
</div>

2.10、佛系居中 absolute + auto

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

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

<div class="box" style="position: relative;">
	<div class="cont" style=" position: absolute; top:0; right: 0; bottom: 0; left: 0; margin:auto;">		
	</div>
</div>

2.11) 、伪类 + display:inline-block

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

<style>	
.box1:after{ display:inline-block; width:0; height:100%; vertical-align:middle;content:'';} 
</style>
<div class="box box1" style="text-align:center; font-size:0;">
	<div class="cont" style="display:inline-block; vertical-align:middle;font-size:12px;"></div>				
</div>

未完待续...