如果查看css手册，会发现display有许多带table字样的可选属性，有table、inline-table、table-row-group、table-row、table-cell等10个之多，可以赋予div类似于<table>等标签的布局特性。大多数浏览器（IE6/7除外）对其支持良好，其实现原理参考《匿名表格元素》。

　　组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。这在子元素不确定宽高和数量时，特别实用！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Demo001_displayTable</title>

    <style>

        /*** table-cell middle center组合使用 ***/

        .cell {

            display: table-cell;

            vertical-align: middle;

            text-align: center;

            width: 240px;

            height: 180px;

            border:1px solid #666;

        }

    </style>

</head>

<body>

    <div class="cell">

        <p>我爱你</p>

    </div>

    <div class="cell">

        <p>我爱你</p><p>亲爱的中国</p>

    </div>

    <div class="cell">

        <p>我爱你</p><p>亲爱的中国</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>

    </div>

</body>

</html>

　　效果：

　　对于只需要垂直居中的情况，可以去掉text-align:center属性。

　　对table-cell元素设置百分比（如100%）的宽高值时无效的，但是可以将父元素设置display:table，再将父元素设置百分比宽高，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。代码示例如下：

    <style>

        html,body{height: 100%;margin:0;padding:0;}

        /*** .table和.cell都将撑满页面，cell的子元素水平垂直居中 ***/

        .table{

            display: table;

            width: 100%;

            height: 100%;

        }

        .cell {

            display: table-cell;

            vertical-align: middle;

            text-align: center;

            border: 1px solid #666;

        }

    </style>

    <div class="table">

        <div class="cell">

            <p>我爱你</p>

            <p>亲爱的中国</p>

            <div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>

        </div>

    </div>

　　table系列的display属性还可以实现等高布局、灵活页眉/页脚、水平自适应布局等等，参考文章《css Table布局》《display:table-cell的应用》。

特别提醒：

　　1.table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。

　　2.设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性。

display:table-cell实现水平垂直居中的更多相关文章

  1. 让div水平垂直居中的几种方法

    最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...

  2. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  3. css水平垂直居中问题

    水平居中: 行内元素:text-align:center; 块级元素:magin:0 auto; 子元素设置:position:absolute;  left:50%;  transform:tran ...

  4. display:table的几个妙用：垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  5. 垂直居中display:table;

    父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:

  6. CSS实现元素水平垂直居中—喜欢对称美，这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  7. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  8. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  9. div中div水平垂直居中

    方法-1 img { vertical-align: middle; } div:before { content: ""; display: inline-block; widt ...

随机推荐

  1. 认识AngularJS

    学习AngularJS所需技能 HTML & CSS JavaScript 为什么要使用AngularJS 如果你想用JavaScript制作动态Web站点,使用AngularJS有以下优点: ...

  2. 搜索类网站记录 && 代理服务器

    搜索类网站记录 && 代理服务器 技巧 1.使用site   我们在搜索的时候,其实不全依赖搜索引擎也是可以的, 比如我们要搜索一个 “中国” ,可以在搜索框输入   中国  site ...

  3. JPA主键生成策略

    @GeneratedValue: 为一个实体类生成一个唯一标识的主键(JPA要求每一个实体Entity,必须有且只有一个主键).它有两个属性,分别是strategy和generator. genera ...

  4. python笔记06-----常用模块（time，os，sys，random）

    模块 1. 模块的定义和导入 定义: 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件(文件名:test.py对应的模块名:test) ...

  5. 直接用php.exe命令还执行php程序跟直接在网页上访问php程序的区别

    1.直接使用php.exe命令执行php程序的格式: php test.php 2.因为没有经过apache或iis这种服务器,所以一些基于服务器的变量是不能使用的, 如$_SERVER,$_ENV等 ...

  6. java.io.Serializable的作用

    Serializable,之前一直有使用,默认的实体类就会实现Serializable接口,对具体原因一直不是很了解,同时如果没有实现序列化,同样没什么影响,什么时候应该进行序列化操作呢?今天查了下资 ...

  7. Java代码实现单例模式

    public class Single { /*private static final Single single=new Single(); private Single(){} public s ...

  8. ASP.NET Core 中的 ORM 之 Entity Framework

    目录 EF Core 简介 使用 EF Core(Code First) EF Core 中的一些常用知识点 实体建模 实体关系 种子数据 并发管理 执行 SQL 语句和存储过程 延迟加载和预先加载 ...

  9. 常用工具说明--Java的常用工具

    1.Eclipse.IntelliJ IDEA Eclipse是IDE领域的瑞士军刀,有着大量定制的接口和无数的插件.它无处不在,后面本文将推荐的其他所有工具都提供Eclipse插件. Eclipse ...

  10. [转]使用EntityFramework6.1的DbCommandInterceptor拦截生成的SQL语句

    本文转自:http://www.cnblogs.com/Ax0ne/p/3620958.html 开始 EF6.1也出来不少日子了,6.1相比6.0有个很大的特点就是新增了System.Data.En ...