浅谈position、table-cell、flex-box三种垂直（水平）居中技巧
一、首先是喜闻乐见的position方法，经典且万能，用法如下：
父元素{
position:relative;
}
子元素{
position:absolute;
top:50%;
left:50%;
margin-top:/*该元素height*0.5的负值*/;
margin-left:/*该元素width*0.5的负值*/;
}
不需要水平居中可以去掉left和margin-left。
划重点：需要父元素和子元素都定义宽高，自适应是不可能自适应的，这辈子都不可能自适应的。
二、 display:table-cell能够使大小不固定的元素实现垂直居中布局，先来一发用法:
父元素{
display:table-cell;
vertical-align:middle;
}
子元素{
vertical-align:middle;
}
table-cell布局除了常见的实现不同宽高的图片垂直居中，还能做到自适应两栏布局（评论区等）：
代码如下：
HTML部分：
<div class="wrap">
<div class="img">
<img src="http://img5.imgtn.bdimg.com/it/u=416202619,4025660570&fm=26&gp=0.jpg" width="80px" height="80px" alt="">
</div>
<div class="text">
<p>文字部分 </p>
</div>
</div>
CSS部分：
<style type="text/css">
.wrap{
display: table-row;
}
.img{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100px;
border: 1px solid #000;
}
.text{
display: table-cell;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
.wrap div+div{
border-left: none;
}
</style>
另外table-cell还能自动使多个子元素等宽分布，不需要自己计算宽度：
代码如下：
ul{
list-style-type:none;
display: table;
width: 250px;
padding:;
}
li{
display: table-cell;
text-align: center;
}
li+li{
border-left: 1px solid #000;
}
划重点：1、IE6/7不支持; 2、table-cell不支持margin属性（但支持padding）,就很僵硬; 3、尽量不要和浮动/定位同时用，会破坏它的css属性。
三、如果你用ie我们就做不成朋友之弹性布局神器flex-box，用法如下：
父元素{
display:flex /* 行内元素用inline-flex */
align-items:center;/*当主轴为水平方向(默认)*/
}
原理是使flex-box的子元素（伸缩项目）沿着侧轴方向（当默认flex-direction:row时，侧轴就是垂直方向）居中对齐。
使用flex-wrap，还可以使伸缩容器里的内容折叠显示：
当调整视口宽度缩小到480px时：
代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{
display: flex;
flex-wrap: wrap;
justify-content:center;/* 主轴方向居中对齐*/
align-items: center;/* 侧轴方向居中对齐*/
padding: 50px;
font-size: 2.5em;
font-weight: bold;
text-align: center;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box">
<p class="item1">超好吃的</p>
<p class="item2">♥</p>
<p class="item3">麻辣小龙虾</p>
</div>
</body>
浏览器兼容情况：
低版本浏览器兼容性解决：
display: -moz-box; /* 低版本firefox */
display:-webkit-box;/* IOS 6-,safari 3.1-6 */
------
display: -ms-flexbox; /* IE10 */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* 较低版本firefox */
display: flex; /*IE11, Chrome29+, FireFox 20+ */
参考：
兼容：
https://zhuanlan.zhihu.com/p/21640023
http://www.cnblogs.com/iriszhang/p/6102524.html
flex-box的兼容性bug解决：
http://www.w3cplus.com/css3/normalizing-cross-browser-flexbox-bugs.html
浅谈position、table-cell、flex-box三种垂直（水平）居中技巧的更多相关文章
- 【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式
一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任 ...
- 浅谈Spring解决循环依赖的三种方式
引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错.下面说一下Spring是如果解决循环依赖的. 第一种: ...
- JS 导出Table为excel的三种可行方法
[html] view plain copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 浅谈Android项目----JSON解析（4种解析技术详解）
json简介 1.概念:json全称是javaScript object Notation,是一种并轻量级的数据交换格式. 2.特点: 1.本质就是具有特定格式的字符串 2.json完全独立于编程语言 ...
- 《浅谈F5健康检查常用的几种方式》—那些你应该知道的知识（二）
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/sinat_17736151/articl ...
- 浅谈MySQL同步到ElasticSearch的几种方式及其优缺点
同步双写 优点:业务逻辑简单. 缺点: 硬编码,有需要写入mysql的地方都需要添加写入ES的代码: 业务强耦合: 存在双写失败丢数据风险: 性能较差:本来mysql的性能不是很高,再加一个ES,系统 ...
- 关于ViewPager、ViewFilpper、ViewFlow三种实现水平向滑动方式的比较
ViewPagerViewPager类提供了多界面切换的新效果.新效果有如下特征:[1] 当前显示一组界面中的其中一个界面.[2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分 ...
- 浅谈HTML5单页面架构（三）—— 回归本真：自定义路由 + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...
- 浅谈position: absolute和position:relative
一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...
随机推荐
- 对于vue的一些理解
首先是组件之间的通信方式 父组件到子组件的通信: props和$refs 子组件到父组件的通信: events 和 $parents 以及 $root 组件之间的通信 eventBus和vuex ev ...
- 2019年GPLT L2-4 彩虹瓶 比赛题解 中国高校计算机大赛-团体程序设计天梯赛题解
彩虹瓶的制作过程(并不)是这样的:先把一大批空瓶铺放在装填场地上,然后按照一定的顺序将每种颜色的小球均匀撒到这批瓶子里. 假设彩虹瓶里要按顺序装 N 种颜色的小球(不妨将顺序就编号为 1 到 N).现 ...
- 本地命令上传文件到服务器以及linux编辑过程中非正常退出问题
一.上传文件到linux服务器首先从你本地切换到你要上传文件的目录,接下来:scp 文件名字 服务器用户名字@服务器ip:存储路径例子:scp index.html root@106.75.229 ...
- 2-28 switch
- Mybatis学习笔记(四) —— SqlMapConfig.xml配置文件
一.properties(属性) SqlMapConfig.xml可以引用java属性文件中的配置信息 在config下定义db.properties文件,如下所示: db.properties配置文 ...
- Educational Codeforces Round 53 (Rated for Div. 2) C. Vasya and Robot（二分或者尺取）
题目哦 题意:给出一个序列,序列有四个字母组成,U:y+1,D:y-1 , L:x-1 , R:x+1; 这是规则 . 给出(x,y) 问可不可以经过最小的变化这个序列可以由(0,0) 变到(x, ...
- IO文件夹拷贝(文件内含有文件和文件夹)
/** * 文件夹拷贝(文件内含有文件和文件夹) * * @param src * @param des */ private static void copy(String src, String ...
- 简述wcf应用
一.新建wcf 如下图:wcf可以简历俩种形式 1.库文件,就是一个类库文件,可以用windows服务或控制台开启. 2.服务应用程序,可以直接IIS上面发布. 二.库文件自动生成的类 接口类 usi ...
- Nmap工具使用
Nmap是一款网络扫描和主机检测的非常有用的工具. Nmap是不局限于仅仅收集信息和枚举,同时可以用来作为一个漏洞探测器或安全扫描器.它可以适用于winodws,linux,mac等操作系统.Nmap ...
- my17_Mysql 主从切换
注意事项: 从库提升为主库read_only要设置为OFF原主库改为从库后,read_only要设置ONread_only=ON并不能对root生效,确保root不会进行数据写入从主库进行 flush ...