首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS图片垂直居中方法整理集合 ！(常见问题解答)
所属分类：
网页制作
/
CSS
阅读数： 452
收藏 0
赞 0
分享
<!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="https://zhanzhang360.qulang.net/imgupload/006181/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="https://zhanzhang360.qulang.net/imgupload/006181/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="https://zhanzhang360.qulang.net/imgupload/006181/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="https://zhanzhang360.qulang.net/imgupload/006181/logo.gif" /> </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("https://zhanzhang360.qulang.net/imgupload/006181/logo.gif") center no-repeat } </style> <div> </div>
提示：您可以先修改部分代码再运行
更多精彩内容
其他人还在看
CSS3实现背景透明文字不透明的示例代码
这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
浅谈CSS中的尺寸单位
这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
CSS中有些属性的前面会加上“*”或“_”所代表的意思
这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS 设置滚动条样式的实例代码
这篇文章主要介绍了CSS 设置滚动条样式的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
这篇文章主要介绍了纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
纯css实现多级折叠菜单折叠树效果
这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果，运用checkbox的checked值来判断下级栏目是否展开，通过css3选择器提供的checked伪类来实现此效果，感兴趣的朋友参考下吧
评论 0
收藏 0
赞 0
分享
CSS Grid 网格布局全解析
这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
css flex 弹性布局详解
这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
CSS3 二级导航菜单的制作的示例
这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
使用css禁用input、checkbox、select等html控件实现disable效果
这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
90后网络爆红美女卖"毒面膜" 年收入超七位数
没钱不懂技术的屌丝草根站长该怎么通过网络赚钱
个人站长经常做的国内广告联盟
做什么样的网站能赚钱?
app开发者如何从应用程序中赚钱？
手机赚钱软件哪个比较好 手机赚钱软件排行榜及使用方法 手机赚钱最快的软件汇总
站长故事
更多
小米、华为互喷的背后：互相吃翔的GDP！
传统地摊转型网络营销90后农村小伙子月入过万
曾与前苹果CEO搭档 Zeta公司营收过亿美元背后的经验与教训
揭秘互联网骗子怎么做到月入过万
作为站长的你是否已有危机感：你被盯上了
写给那些曾经想转型却找不到方向的的站长
