如果查看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. ★ phpStudy安装SSL证书实现https链接

    [准备] (1)phpstudy下载:http://phpstudy.php.cn/ (2)phpstudy集成环境下正常运行的网站 (3)避免意外请先备份(复制)好httpd.conf配置文件   ...

  2. ANR触发原理（what triggers ANR?）

    Ref: http://developer.android.com/training/articles/perf-anr.html http://stackoverflow.com/questions ...

  3. Java之IO(十)Reader和Writer

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7071733.html 1.前言 之前的章节已经将Java8的io包中的字节流介绍完毕了.本章开始介绍Java的I ...

  4. Java之IO(五)文件系统

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6992043.html 1.前言 在讲解Java的文件流之前,先来认识一下Java的文件系统的实现.值得一提的是, ...

  5. ActiveMQ学习--002--Topic消息例子程序

    一.非持久的Topic消息示例 注意 此种方式消费者只能接收到 消费者启动之后,发送者发送的消息. 发送者 package com.lhy.mq.helloworld; import java.uti ...

  6. 如何正确删除VMare虚拟机上的系统机器（图文详解）

    不多说,直接上干货! 打开虚拟机进入操作系统列表 在操作系统列表,点击要删除的操作系统,如win7, 点击要删除的操作系统后,在主菜单中找到虚拟机. 如图所示,从磁盘中彻底删除. 是 即,成功从虚拟机 ...

  7. 三篇文章了解 TiDB 技术内幕 - 说存储(转)

    引言 数据库.操作系统和编译器并称为三大系统,可以说是整个计算机软件的基石.其中数据库更靠近应用层,是很多业务的支撑.这一领域经过了几十年的发展,不断的有新的进展. 很多人用过数据库,但是很少有人实现 ...

  8. 编写dimgr脚本学到的知识及技巧

    编写dimgr是为了管理手机上的镜像,在此总结下过程中学到的知识及技巧(不讨论具体用法). 参数处理 以往处理脚本参数直接用循环加判断语句,若是脚本只有简单参数,这无疑是简便可行的方法.但当需要处理复 ...

  9. [转] Ubuntu 14.04/14.10下安装VMware Workstation 11图文教程

    点击这里查看原文 译者:GuiltyMan 本文由 Linux公社翻译组 原创翻译  Linux公社 诚意奉献 更多请访问此处博客网站 VMware workstation 是一个可以进行桌面操作的虚 ...

  10. sublime text 2+sublimeClang

    sublimeClang 是github上面的开源项目,可用于C/C++的自动补全 github:https://github.com/quarnster/SublimeClang 配置sublime ...