overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
/style
/head
body
div id="wrap"
div id="subwrap"
div id="content"pre现在我们要使这段文字垂直居中显示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
/pre/div
/div
/div
/body
/html
p.s. 垂直居中vertical-align的值是middle ， 而水平居中align的值是center ， 虽然同是居中但关键字不同 。

文章插图

怎样让div的内容垂直居中显示
虽然Div布局已经基本上取代了表格布局 ， 但表格布局和Div布局仍然各有千秋 ， 互有长处 。 比如表格布局中的垂直居中就是Div布局的一大弱项 ， 不过好在千变万化的CSS可以灵活运用 ， 可以制作出准垂直居中效果 ， 勉强过关 。
要让div中的内容垂直居中 ， 无非有以下几种方法 ， 等我一一列举：
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字 ， 那它的制作最为简单 ， 只要让文字的行高和容器的高度相同即可 ， 比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果 。
二、内边距（padding）法
另一种方法和行高法很相似 ， 它同样适合一行或几行文字垂直居中 ， 原理就是利用padding将内容垂直居中 ， 比如：
p { padding:30px; }
这段代码的效果和line-height法差不多 。
三、模拟表格法
模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示 ， 用到的CSS属性有display、vertical-align等 。 先看下面的Html代码：
div id="box" div id="content"居中显示/div /div
参照以上Html代码 ， 让最外面名为box的Div呈表格样式显示 ， 然后再让box中名为content的Div呈单元格显示 ， 并利用vertical-align:middle让其垂直居中 ， 这样就模拟出来和表格一样的显示方式 ， CSS代码如下：
#wrap
{ height:400px; display:table; } #content { vertical-align:middle;
display:table-cell; border:1px solid #FF0099; background:#000;
width:400px; }
但这种方法有一个弊端 ， 由于IE浏览器对高度理解会产生错误 ， 所以这种方法仅对Firefox有效 ， 对IE无效 ， 既然这样 ， 我们就需要找出对IE的修正方法 ， 于是有了另外一种方法 。
四、定位法
顾名思义 ， 定位法是利用CSS定位属性position对元素进行定位的方法 ， 也属于模拟方法 ， 不过它对IE的支持还是不错的 。 它的Html代码为：
div id="box" div id="sub" div id="content"垂直居中/div /div /div
这段代码比上一种方法中多出了一个名为sub的Div ， 它的作用是用来定位 ， 原理就是：首先让box出于相对定位 ， sub相对box出于相对定位 ， 位于box垂直方向的50% ， 再让content中的真正内容出于sub垂直方向的-50% ， 从而制作出content在box中垂直居中的效果 ， 它们的CSS代码如下：
#wrap
{ border:1px solid #000; background:#F00; width:400px; height:400px;
position:relative; } #subwrap { position:absolute; top:50%; } #content {
border:1px solid #000; position:relative; top:-50%; color:#FFF; }

• 怎样修改图片上的文字「word怎样修改图片上的文字」
• cad文字显示问号「为什么cad文字显示问号」
• 农村房子是越建越好看，教授退休房外立墙藤曼，犹如瀑布般垂直而下
• 第三套大众健美操一ji步骤文字说明
• diva歌脚是甚么意义
• 引力魔方图片可以加文字吗？有什么用？
• 哄男朋友睡觉的短篇故事 超甜的文字伴他入睡
• 朋友圈发吃的配什么文字比较有趣
• 图片插入Word/WPS后发现图片和文字重叠怎么办
• VIDIVICI女神隔离霜评测怎么样