一、首先是喜闻乐见的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三种垂直（水平）居中技巧的更多相关文章

  1. 【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式

    一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任 ...

  2. 浅谈Spring解决循环依赖的三种方式

    引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错.下面说一下Spring是如果解决循环依赖的. 第一种: ...

  3. JS 导出Table为excel的三种可行方法

    [html] view plain copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. 浅谈Android项目----JSON解析（4种解析技术详解）

    json简介 1.概念:json全称是javaScript object Notation,是一种并轻量级的数据交换格式. 2.特点: 1.本质就是具有特定格式的字符串 2.json完全独立于编程语言 ...

  5. 《浅谈F5健康检查常用的几种方式》—那些你应该知道的知识（二）

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/sinat_17736151/articl ...

  6. 浅谈MySQL同步到ElasticSearch的几种方式及其优缺点

    同步双写 优点:业务逻辑简单. 缺点: 硬编码,有需要写入mysql的地方都需要添加写入ES的代码: 业务强耦合: 存在双写失败丢数据风险: 性能较差:本来mysql的性能不是很高,再加一个ES,系统 ...

  7. 关于ViewPager、ViewFilpper、ViewFlow三种实现水平向滑动方式的比较

    ViewPagerViewPager类提供了多界面切换的新效果.新效果有如下特征:[1] 当前显示一组界面中的其中一个界面.[2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分 ...

  8. 浅谈HTML5单页面架构（三）—— 回归本真：自定义路由 + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...

  9. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

随机推荐

  1. JIRA安装部署说明

    参考  https://blog.51cto.com/tiantiantesting/1744175 前提:已安装好JDK.MySQL JIRA 是澳大利亚 Atlassian 公司开发的一款优秀的问 ...

  2. HDU - 6416 ：Rikka with Seam（DP & 前缀和 & 数学）

    pro:给定N*M的矩阵,现在让你在每一行删去一个位置,然后形成新N*(M-1)的矩阵,问有多少种不同的新的矩阵.需要满足相邻行删去的位置不大于K. (题目是01矩阵,其实任意矩阵都可以做,本题算法里 ...

  3. springboot整合dubbo注解方式(四)

    在笔者换jar包时候出现问题: Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/zook ...

  4. (转)接口自动化测试之http请求实践总结

    一.接口测试的基本思路 1.确定要测试接口的请求类型.接口是get请求还是post请求. 2.确定接口的参数.需要传输的参数有哪些,类型分别是什么,都有哪些要求等. 3.按照参数要求构造请求需要的参数 ...

  5. 测试用例逐步演进-xmind2excel（Python版）测试用例逐步演进-xmind2excel（Python版）

    最近,我在做项目的时候,经常被问到一个问题:如何做测试评审会更有效呢? 只要做过测试用例评审,特别是比较复杂的测试用例评审的时候,很多测试同学都会苦恼于如何能更有效的向大家说出自己的测试设计思路. 当 ...

  6. Spyder清除Variable Explorer&&手动安装protobuf3.0（为了配置windows的python接口）

    输入:reset 选择:y PS:建议在windows下,安装anaconda32bit版本的,可以兼容更多第三方包.   Conda使用清华镜像 配置镜像 在conda安装好之后,默认的镜像是官方的 ...

  7. sf01_什么是数据结构

    数据结构解决什么问题 如何在计算机中存储数据和信息,采用什么样的方法和技巧加工处理这些数据,都是数据结构需要努力解决的问题. 解决问题的步骤 使用计算机解决问题的步骤:分析具体问题得到数学模型,设计解 ...

  8. vue.js依赖安装和引入

    在项目开发过程中我们要安需安装依赖,安装方法 1.可以在项目的package.json文件中的dependencies写入依赖名称和依赖版本,然后打开命令行工具进入项目运行vue install安装 ...

  9. mpdf Could not find image file (http://local.com/xxxxx)

    记录一下昨天和今天遇到的,yii2使用mpdf的时候,图片是使用php方法生成的二维码,所以图片地址为http://local.com/xxxxx,url中携带不同的参数. 但是开启了 $mpdf-& ...

  10. java——哈希表 HashTable

    在一个类中重写hashCode()和equals() package Date_pacage.hash; public class Student { private int grade; priva ...