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