如果查看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. js04

    接着看一些js的基础,这里主要说一下js的对象. 1.对象:    js中的所有事物都可以看作是对象:字符串.数值.数组.函数...    内建对象:String    Date    Array   ...

  2. (转)http://blog.csdn.net/renfufei/article/details/38474435

    原文:http://blog.csdn.net/renfufei/article/details/38474435

  3. Android 开发工具类 17_setAlarm

    Alarm 是在应用程序生命周期之外设置的,所以它们十分适合于调度定时更新或者数据查询,从而避免了在后台持续运行 Service.但触发 Alarm 时,就会广播指定的 Pending Intent. ...

  4. C/C++ -- Gui编程 -- Qt库的使用 -- Qt5试用

    1.头文件<QtGui>变成了<QtWidgets> 相应<QtGui/***>变成了<QtWidgets/***> 2.QTextCodec::set ...

  5. 127.0.0.1和0.0.0.0和本机IP的区别

    在一次网络课程的听课中,我突然察觉到自己有个疑惑就是在配置一些服务的时候我们会用到localhost(127.0.0.1)或者0.0.0.0 和当前主机IP这三个.那么具体该怎么使用这三个地址,这三个 ...

  6. 记laravel5.5项目php-fpm迁移到swoole4.2.9

    事起说明 最近对上线半年多的laravel项目做了一次少大的改动,由php-fpm改为swoole,这里做个记录. 2019年过年前半个月,上阿里云后台查看前一天的访问请求日志,发现很多接口响应慢.翻 ...

  7. C#语法之扩展

    扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用.这是msdn的描述.上面几句 ...

  8. Node.js之Express三

    端午节3天说没就没了,自己的脚伤都快一个月了还没好,原本想着去桂林或者厦门呢,可计划赶不上变化,看自己公司C#软件工程师的招聘条件有要求MongoDb,年前就打算自己学习下,买的这本书就叫Node.j ...

  9. 如何使用 Telegram

    Telegram是一款加密的实时通讯软件,本文告诉大家如何使用 这个软件. 在使用之前,需要保证自己已经开了梯子,如果没有梯子,那么就无法使用这个工具. 假如梯子是 127.0.0.1 端口 1080 ...

  10. Xcode DEBUG宏定义，debug和release模式的选择

    设置DEBUG, 使用宏定义: #if DEBUG NSLog(@"debug model"); #else //执行release模式的代码 #endif