扫描二维码用手机看文章推荐这篇日记的豆列
······> DIV中的内容 如何让其垂直居中？
DIV中的内容 如何让其垂直居中？
tuzi123 & &
发布时间： & &
浏览：15 & &
回复：0 & &
悬赏：0.0希赛币
DIV中的内容 怎么让其垂直居中？？？？？&!DOCTYPE & html & PUBLIC &
&-//W3C//DTD & XHTML & 1.0 & Transitional//EN & &
&html & xmlns= &; & lang= &gb2312 & & xml:lang= &gb2312 &&
&title& Down & CSS &/title&
&meta & http-equiv= &Content-Type & & content= &text/ & charset=gb2312 & & /&
&script & type= &text/javascript & & src= &chrome.js &&
&style & type= &text/css &&
.chromestyle & {width:760 & background-color:#165AB3; & /*font-weight:*/}
.chromestyle & ul & li & { & display:} &
&!--让LI没有黑点横向排列--&
.chromestyle & ul & li & a & {
color:#494949;
padding:4px & 7
text-decoration:
border-right:1px & solid & #DADADA;
.chromestyle & ul & li & a[rel]:after{
content: &v &;
.chromestyle:after{
content: &. &;
visibility:
.dropmenudiv & {
border:1px & solid & #165AB3; & /*边框*/
border-bottom-width:0;
font:normal & 12px & V
line-height:18
z-index:100;
background-color:#5293d1;
visibility:
filter:progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
.dropmenudiv & a{
text-align:3x;
padding:2px & 0;
border-bottom:1px & solid & #165AB3;/*设置对象下边框的样式*/
text-decoration:
font-weight:
color:#FFFFFF;
* & html & .dropmenudiv & a{
width:100%;
.dropmenudiv & a:hover
background-color:#1d7
font-size: & 12
text-decoration: &
margin: & 0
text-align:
a:link & {
color: & #FFFFFF;
text-decoration: &
a:visited & {
& color: & #FFFFFF;
& text-decoration: &
a:hover & {
text-decoration: &
color:#FFFF00
a:active & {
color: & #FFFFFF;
text-decoration: &
a.hidden & {
& color: & #FFFFFF;
&!-- & 主菜单 & --&
&div & id= &chromemenu & & class= &chromestyle &&
&a & href= &# && 首页 & | &/a&
&a & href= &# & & rel= &dropmenu1 && 新闻中心 & | &/a&
&a & href= &# & & rel= &dropmenu2 && 产品方案 & | &/a&
&a & href= &# & & rel= &dropmenu3 && 服务支持 & | &/a&
&a & href= &# & & rel= &dropmenu3 && 人才招聘 & | &/a&
&a & href= &# & & rel= &dropmenu3 && 关于众志 & | &/a&
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&您所在的位置： &
两大方法实现DIV垂直居中
两大方法实现DIV垂直居中
本文向大家介绍一下DIV垂直居中的几种方法，主要包括单行DIV垂直居中和多行未知高度文字的DIV垂直居中两大部分内容，希望本文介绍对你有所帮助。
在说到DIV垂直居中这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？本文和大家分享一下DIV水平居中的几种方法。
Hack技术就可以啊！所以在这里我还要铝骄洌CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的&td&、&th&、&caption&等，而像&DIV&、&span&这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
DIV垂直居中的几种方法
一、单行DIV垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
DIV{ &height:25 &line-height:25 &overflow: &}&
这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。更多CSS教程。
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN& &&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&单行文字实现垂直居中&metahttp-equiv=&Content-Type&content=&text/charset=utf-8&&styletype=&text/css&&body{font-size:12font-family:} &DIV{ &height:25 &line-height:25 &border:1pxsolid#FF0099; &background-color:#FFCCFF; &} &&&&DIV现在我们要使这段文字垂直居中显示！DIV&&&&
二、多行未知高度文字的DIV垂直居中
如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种&看起来&的垂直居中方式，它只不过是使文字把&DIV&完全填充的一种访求而已。可以使用类似下面的代码：
DIV{ &padding:25 &}&
这种DIV垂直居中方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。
&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN& &&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&多行文字实现垂直居中&metahttp-equiv=&Content-Type&content=&text/charset=utf-8&&styletype=&text/css&&body{font-size:12font-family:} &DIV{ &padding:25 &border:1pxsolid#FF0099; &background-color:#FFCCFF; &width:760 &} &&&&DIV现在我们要使这段文字垂直居中显示！ &DIV{ &padding:25 &border:1pxsolid#FF0099; &background-color:#FFCCFF; &} &DIV&&&&
【编辑推荐】
【责任编辑： TEL：（010）】
关于的更多文章
Angular.js 是一个MV*（Model-View-Whatever，不管是MVC或者MVVM
作为移动开发者，WOT2016移动互联网技术峰会，绝对有你不得不来的理由。
IE浏览器不支持很多CSS属性是出了名的，即便在支持的
又是一周匆匆而过。上周五、周六两天，2013年51CTO云
十一归来，貌似大家都没有什么劲头。本周五，为期两天
本书面向企业网络应用需求，详细介绍了Windows网络互联解决方案、中小企业共享上网解决方案、基于ISA Server 2006的代理服务器与
51CTO旗下网站欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> div垂直居中 盒子上下垂直居中,让在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。
垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用让这个登录布局水平和垂直居中。
这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。
1、具体实例代码如下
&!DOCTYPE&html&&&&charset=&utf-8&&&上下垂直居中&在线演示&DIVCSS5&&#main&{position:&width:400height:200left:50%;top:50%;&margin-left:-200margin-top:-100border:1px&solid&#00F}&/*：为了方便截图，对CSS代码进行换行*/&&&&id=&main&DIV水平居中和上下垂直居中&&&
这里设置一个&#main&对象样式，400px,200px，使用了样式同时使用绝对定位，并且同时设置和,为了观察到效果，所以对此div盒子加了个红色。
2、实例截图
实现div对象同时上下垂直居中和水平居中截图
3、水平垂直居中原理介绍
这里使用了绝对定位，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200margin-top:-100，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。
相关CSS教程推荐：
4、在线演示：
5、完整案例+css打包下载：
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 13:40
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台