看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
标准浏览器下另类方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>
标准浏览器严格型申明下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
利用字体大小的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;text-align:center;border:1px solid #f00;line-height:500px;
height:500px;font-size:500px
}
*>div{
font-size:12px
}
div img {
vertical-align:middle
}
</style>
<div>
<img src="http://www.google.com/intl/en/images/logo.gif" />
</div>
display:inline-block 方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
div {
display:table-cell;
height:300px;
width:500px;
text-align:center;
border:1px solid #000;
vertical-align:middle
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->
<div>
<i></i>
<img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div>
最简单当然是背景图片的方法拉。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #f00;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
</style>
<div>
</div>
分享到：
相关推荐
在定义网页的CSS样式的时候，我们或许并不怎么用到垂直居中。
9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16....
文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 （1）背景颜色 选择器{ background-color： transparent透明（透明）/color； } （2）背景图片（便于控制位置） 常用于logo 装饰性...
文章不多，但都系原创。撰写不易，望多多包涵，多多 star，转载请说明markdown ...CSS 元素垂直居中，未知高度该如何处理？CSS3 系列：简单几步，用纯 CSS3 实现 3D 翻转效果！如何让被遮挡层可以进行事件点击？（纯 CS
包括以下内容： 代码规范 CSS基础 CSS命名 网页头部元素 CSS调用 CSS基本布局知识 页面背景 文本…链接样式 水平居中…浮动 列表元素 ...CSS文本属性 ...各种水平和垂直居中1 字体的综合属性 图文混排 ......
@import ( less ) ' bower_components/brainless/src/brainless.less '包括什么mixin 分为 9 个主要组 : 管理关键帧动画的简写 _center.less基于变换的居中便利#container _container.less轻松创建水平和垂直布局...
诸如垂直居中、处理全屏模式窗口等等。 在 2014 年 3 月 11 日的上讨论了这本 Photoshop 手册有三个好处： 提高新设计师员工的入职效率 平滑处理同一项目/文件的多个设计师之间的切换 帮助我们的开发人员在深入...
读我小代码段的集合-在其他地方可以找到并重复使用（带有某些mod）或重新编写。 目前拥有： 动画链接... 材质设计的波纹效果的伪复制（但是，该效果总是从所单击元素的中心开始） 垂直居中CSS（旧。最近使用flex）。
Front-End with workkk :fire:新加学习日记专栏和面试专栏 目录结构 JavaScript相关 array相关 call-apply-bind使用及...垂直居中 BFC canvas CSS3.0 grid布局 less SVG transition icon HTML(集合DOM和BOM相关) aja