如果是用table写的表格，那么用vertical-align:middle就可以实现垂直居中
如果是用div写的表格，那么需要这样写：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{padding:0;margin:0;}
#container { width: 500px; height: 600px; display: table; border:1px solid;}
#position { display: table-cell; vertical-align: middle; text-align: center; }
#container { *position: relative; }
#position { *position: absolute; *top: 50%; }
#content { *position: relative; *top: -50%; }
</style>
</head>
<div id="container">
<div id="position">
<div id="content">这里是要垂直居中的内容</div>
</div>
</div>
</html>
hack写法：在属性前加“*”或者“#”的声明可以仅让IE7及以下版本理解，而其它任何浏览器都无法理解这个”*”和“#”。
分享到：
相关推荐
本文主要探讨了如何使用CSS实现垂直居中，这是页面布局中常见的需求。垂直居中分为两种主要情况：内外元素高度全定和外层元素高度定，内层高度不定。 1. **内外元素高度全部确定的情况** - **line-height 与 ...
### CSS 实现垂直居中的五种方法 在前端开发中，如何使元素在页面中垂直居中是一项常见的需求。本文将详细介绍五种不同的方法来实现这一目标，并对每种方法的特点进行分析，以便开发者根据实际情况选择最合适的方案...
在CSS布局中，垂直居中是一项常见的需求，尤其在页面设计中显得尤为重要。...以上就是针对不同情况的CSS垂直居中实现方式，每种方法都有其适用场景和局限性，开发者需要根据项目需求和目标浏览器范围选择合适的方法。
本教程将详细讲解5种有效的CSS方法，帮助你掌握垂直居中的技巧。 1. **Flexbox布局** Flexbox是现代CSS布局模型，特别适合处理容器内子元素的对齐问题。要实现垂直居中，首先设置容器的`display`属性为`flex`，...
"CSS实现完美垂直居中"这一主题深入探讨了如何利用CSS技术使元素在容器内实现精确的垂直对齐。以下是一些关于这个主题的关键知识点： 1. **单行文本垂直居中**： 对于单行文本，可以使用`line-height`属性来实现...
综上所述，"DIV+CSS 图片垂直居中效果"可以通过多种方法实现，具体选择哪种取决于项目需求、浏览器兼容性和响应式设计的需求。在提供的`index.html`、`images`和`css`文件中，我们可以看到实际的代码应用和图片资源...
以上都是在不同场景下实现CSS图片垂直居中的常见方法。具体选择哪种方法取决于你的项目需求，比如兼容性、布局复杂度等因素。在实际应用中，可能需要根据实际情况调整这些代码，以适应各种浏览器和设备。通过阅读...
本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...
本篇文章将深入探讨如何利用CSS实现图片的垂直居中效果。 首先，我们来看几种常见且实用的CSS方法： 1. **Flexbox布局**： Flexbox是CSS3引入的一种新的布局模式，特别适合处理容器内元素的对齐问题。要使图片在...
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
CSS实现垂直居中是网页布局中的常见需求，本文将详细讲解四种不同的方法，帮助开发者更好地理解和运用这些技巧。 1. **行高line-height实现单行文本垂直居中** 单行文本的垂直居中可以通过设置`line-height`来实现...
#### CSS垂直居中原理 在CSS中，`vertical-align`属性主要用于设置行内元素或表格单元格中的内容垂直对齐方式。但是，当涉及到块级元素时，这个属性并不起作用。因此，我们需要采用其他技术来达到垂直居中的目的。...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 方法1：table-cell html结构： XML/HTML Code复制内容到剪贴板 box1>...
，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高（line-height） 添加伪元素 calc...
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面...