如果查看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. WPF快速实现XML可视化编辑工具

    虽然最近业余时间主要都放在研究AngularJS上了,不过由于正好要帮朋友做一个生成XML的小工具,顺便又温顾了一下WPF.虽然这个时代相对于Web应用和移动App,Windows应用程序是越来越少了 ...

  2. spring中的context:include-filter和context:exclude-filter的区别

    在Spring 的配置文件中有: <context:component-scan base-package="njupt.dao,njupt.service"> < ...

  3. 剑指offer四十之数组中只出现一次的数字

    一.题目 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 二.思路 建一个hashMap,统计各数字出现的次数,然后遍历hashMap,输出出现一次的数字 ...

  4. (转)权威支持: 选择正确的 WebSphere 诊断工具

    权威支持: 选择正确的 WebSphere 诊断工具 原文:https://www.ibm.com/developerworks/cn/websphere/techjournal/0807_supau ...

  5. .gitignore释疑

    自己总结: *.a--匹配任意路径下的.a文件 a/--匹配任意路径下的a文件夹 a/*--匹配根目录下的文件夹a下的任意文件(等同于 /a/* 或 /a/)  ----一般情况下不会有这种写法 /a ...

  6. 关于 PHP 开放 enable_dl 函数利用 图片Disable_functions

    三篇引文地址: 利用PHP扩展模块突破Disable_functions执行命令 如何编写PHP扩展 php dl函数(详细解释)

  7. 17-hadoop-yarn安装

    在搭建好的 resourceHA的环境下, 配置yarn yarn是 hadoop2以后的计算框架, 通过ResourceManager的调用, 将我们写的程序包分到各个nodeManager上, 由 ...

  8. Linux的MySQL不能远程访问

    1.首先,你要确认用户是否只允许localhost访问: 在linux下登录mysql mysql -uroot -p密码;     use mysql;     select `host`,`use ...

  9. 进击Node.js基础（二）

    一.一个牛逼闪闪的知识点Promise npm install bluebird 二.Promise实例 ball.html <!doctype> <!DOCTYPE html> ...

  10. jQuery ajax - getJSON() 用法实例

    实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: $.getJSON("test.js", function(json){ aler ...