如果查看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即可）。这在子元素不确定宽高和数量时，特别实用！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!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会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。代码示例如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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等属性。
3.不要在子元素上加绝对定位，会影响垂直居中。
分享到：
相关推荐
例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。...
`display: table-cell` 是一个在 CSS 中实现此类布局的有效方法，它利用了表格单元格（table-cell）的特性来实现列的自适应。这种方法在处理不同屏幕尺寸和设备时能够保持内容的对齐和比例。 在标题和描述中提到的...
在网页设计中，实现div元素垂直居中是常见需求，而display:table-cell方法提供了一种简单而兼容多种浏览器的解决方案。这种方法特别适用于IE7和IE6浏览器之外的环境。对于IE7和IE6，我们可以使用vertical-align:...
尽管现代布局更倾向于使用Flexbox和Grid，但旧版CSS中，可以将父元素设为`display: table`，子元素设为`display: table-cell`，并用`vertical-align: middle`来实现垂直居中。 10. **CSS `calc()` 函数**： 当...
下面将详细介绍如何实现元素的水平垂直居中，并提供相关的代码示例。 一、CSS 居中方法 1. **Flexbox布局**：Flexbox是现代浏览器广泛支持的布局模式，可以轻松实现子元素的水平垂直居中。 ```css .container { ...
总结一下，实现元素的垂直居中可以使用`display: table-cell`和`vertical-align`属性。`vertical-align`特别适用于行内元素，提供诸如`top`, `middle`, `bottom`等多种对齐方式。同时，要注意不同浏览器的兼容性问题...
- **使用`display:table-cell`**：对于垂直居中的需求，可以在不支持`display:inline-block`的浏览器中使用`display:table-cell`作为备选方案。 ```css .ie-fallback { display: table-cell; vertical-align: ...
` 实现水平和垂直的精确居中。这里假设图片的宽度和高度与其父级容器相等，这样设置可以使图片的中心点与父级容器的中心点重合。`top: -50%;` 和 `left: -50%;` 分别将图片向上和向左移动其自身尺寸的一半，从而达到...
实现图片水平垂直居中的方法有多种，以下是几种常见且实用的方法： 1. 使用 Flexbox 布局： Flexbox 是现代CSS布局模式，适用于单行或单列的弹性容器。在父容器上设置 `display: flex;`，并使用 `align-items: ...
结合以上方法，可以同时实现水平和垂直居中： ```css .container { display: flex; justify-content: center; align-items: center; } ``` 或者使用CSS Grid： ```css .container { display: grid; ...
以下代码演示了如何使用Flexbox实现水平垂直居中： ```css .container { display: flex; justify-content: center; align-items: center; } .image { /* 保持原有样式 */ } ``` 2. **Grid布局** - CSS ...
首先，对于标准浏览器，可以通过将外部容器设置为display: table-cell的方式来实现图片的垂直居中。这种做法类似于表格中的垂直居中，利用了CSS的vertical-align属性。具体步骤如下： 1. 将外部容器#box的display...
我们使用table-cell也可以简单的实现，利用table-cell来制作横向排列的好处我觉得有三点（呵呵呵，有些牵强） 1.float以及 clear:both都可以省略了；2.纵向居中也可以了；3.就算使用border和padding也不会顶出边框了...
position: absolute，display:table-cell，display:flex四种垂直居中的方法
要实现垂直居中，可以设置容器的`display`属性为`flex`，然后添加`align-items: center`。例如： ```css .container { display: flex; align-items: center; } ``` 2. **Grid布局** CSS Grid提供了一个二维...
` 是用来实现水平居中的，而`.Table-Cell` 的 `vertical-align: middle;` 则确保了内容在垂直方向上的居中对齐。 使用 `table-cell` 方法的一个主要优势是内容高度可以随内容自动变化，而且如果内容溢出，父元素的...
本文将深入探讨并演示多种实现DIV垂直居中的方法，包括但不限于使用CSS的`height`, `line-height`, `padding`, `display`属性，以及如何通过`vertical-align`属性配合特定的HTML结构来达到目标。 #### 方法一：...
- 设置父容器`display: table`，子元素`display: table-cell`。 - 使用`vertical-align: middle;`使子元素在垂直方向居中。 - 优点：兼容性好，适用于简单的两列布局。 - 缺点：不适用于复杂的布局，且失去了...