面试常见问题——垂直居中的几种方法
来源:互联网 发布:淘宝分期付款怎么还款 编辑:程序博客网 时间:2024/06/06 19:49
(前几天面试,被问到两次,没答好,找到这篇文章收藏学习一下 ,来自这里)
做手机的页面,经常会遇到需要垂直居中的情况,这里把常用的 垂直居中的几种方法 整理下。
结构
<div class="box box1"><span>我是垂直居中元素</span></div>
方法1:dispaly:table-cell
.box1{ text-align:center; display:table-cell; vertical-align:middle;}
方法2:display:flex
.box2{ display:flex; justify-content:center; align-items:center; text-align:center;}
方法3:translate(-50%,-50%)
.box3{ position:relative;}.box3 span{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); width:100%; text-align:center;}
方法4:display:inline-block
.box4{ text-align:center; font-size:0;}.box4 span{ vertical-align:middle; display:inline-block; font-size:16px;}.box4:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle;}
方法5:margin:auto
.box5{ display:flex; text-align:center;}.box5 span{ margin:auto;}
方法6:display:-webkit-box
.box6{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center;}
效果
整理这些实际是想尝试下不同的布局。
2,5,6实际都是flexbox的方法,flexbox兼容比较麻烦,布局可以参考ionic栅格。
3需要定位,4需要有参照物,最简单的还是table的方法。
写了一个table-布局的demo,实现方法比较简单,兼容性也比较好。
网上也已经有table的栅格系统,retchat很多组件也用了table布局。
0 0
- 面试常见问题——垂直居中的几种方法
- div 垂直 居中的几种 方法
- 垂直居中的几种实现方法
- 垂直居中的几种实现方法
- 实现垂直居中的几种方法
- 图片垂直居中的几种方法
- div垂直居中的几种方法
- 文本垂直居中的几种方法
- CSS垂直居中的几种方法
- css垂直居中的几种方法
- css3垂直居中的几种方法
- 垂直居中的几种方法
- 元素垂直居中的几种方法
- 水平垂直居中的几种方法
- 水平垂直居中的几种方法
- 元素垂直居中的几种方法
- div盒子水平居中垂直居中的几种方法
- css的几种垂直居中的方法
- Java 之正则表达式
- js 原型的思考
- JDBC编程小结
- 解决Sqlite Developer过期的最简单办法
- 面试中必知必会的那些题——单链表倒置
- 面试常见问题——垂直居中的几种方法
- 编程之美读书笔记2.20—程序理解和时间分析
- 预装win8安装 ubuntu 14.04TLS双系统
- 网站的无密码登录
- 高富帅们的Git技巧
- Eclipse自带常用的九个方便的快捷键
- 多线程扩展内容
- PL/SQL Developer导入导出数据库方法及说明
- [ ECUG 专题回顾]《再谈 CERL:详论 GO 与 ERLANG 的并发编程模型差异》-许式伟(七牛云存储 CEO)