说到居中,大部分人可能都觉得,这简直婴幼儿问题嘛,别说前端了,恐怕设计后端,都会不假思索地敲个: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>
未完待续...