思享工具箱

CSS图片垂直居中方法

摘要：
在div中垂直居中多行文本的方法：div｛height:100px；100px；border:solid1pxred；text align:center；display:table cell；verticalalign:middle｝以下是在互联网上很难找到的许多方法：请注意，有很多人问这个问题，所以请花点时间整理一下，欢迎您的评论并进行其他更改，谢谢！链接到原文：使用IE6下的书写模式，实现未知高度替换元素的垂直中心。DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0过渡//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“˃使用定位在垂直办公室中显示图片.mao｛width:500px；height:220px；line-height：220px；border:1pxsolid；text-align:center；｝.miaoimg｛vertical-align:middle；｝在具有固定高度和宽度的容器中，图片垂直于中心绿色容器是span，以将其左上角与容器的中心点对齐。红色是特定的图片。再次设置负值，使自己的中心点与父容器的中心点重合，最终实现垂直定位的目标。

CSS图片垂直居中方法第1张

让div里面的多行文本垂直居中的方法：

div{height:100px;100px;border:solid 1px red;text-align:center; display:table-cell;vertical-align:middle}

下面是网上好不容易找的多种办法：

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接：IE6下用writing-mode实现 未知高度替换元素垂直居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>利用定位来显示垂直局中的图片</title>
<style type="text/css">
.miao {
  width:500px;
  height:220px;
  line-height:220px;
  border: 1px solid;
  text-align: center;
}
.miao img {
  vertical-align: middle;
}
</style>
<!--[if IE 6]>
<style type="text/css">
  .miao span {
    border: 1px solid red;
    height: 100%; /* 要保证和父元素高度一样才行 */
    writing-mode: tb-rl;
    vertical-align: middle;
  }
</style>
<![endif]-->
</head>
<body>
<h1>固定高宽的容器中，图片垂直局中。</h1>
<p>使用的绝对定位和相对定位的方法</p>
<div class="miao">
    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了
</div>
<hr />
<div class="miao">
    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了
</div>
<hr />
<div class="miao">
    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了
</div>
</body>
</html>

/*yoom 粘贴开始 2010-01-18*/
因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：

CSS图片垂直居中方法第2张CSS图片垂直居中方法第3张
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用定位来显示垂直局中的图片</title>
<style type="text/css">
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.miao{position:relative;overflow:hidden;}
.miao span{position:absolute;left:50%;top:50%;}
.miao span img{position:relative;left:-50%;top:-50%;}
</style>
<![endif]-->
</head>
<body>
<h1>固定高宽的容器中，图片垂直局中。</h1>
<p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p>
<div class="miao">
    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>
<hr />
<div class="miao" style="300px;height:80px;">
    <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>
<hr />
<div class="miao" style="500px;height:220px;">
    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>
</div>
</body>
</html>
View Code


如果不喜欢条件注释，可自行将代码以css hack的方式拼凑起来。
原帖链接：未知高宽的图片垂直局中
/*yoom 粘贴结束*/

CSS图片垂直居中方法第4张CSS图片垂直居中方法第5张
<!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>
View Code

标准浏览器下另类方法:

CSS图片垂直居中方法第6张CSS图片垂直居中方法第7张
<!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>
View Code

标准浏览器严格型申明下：

CSS图片垂直居中方法第8张CSS图片垂直居中方法第9张
<!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>
View Code

利用字体大小的方法：CSS图片垂直居中方法第10张

<!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>

最简单当然是背景图片的方法拉。CSS图片垂直居中方法第11张

<!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>

标签：#垂直居中#html居中#绝对定位#border#position#vertical-align#500px#text-align#css#miao | 浏览：190 | 发布日期：

免责声明：文章转载自《CSS图片垂直居中方法》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇[Java] 使用Java自动获取Excel的rows 和 columnsjava网络编程，简单的客户端和服务器端下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

前端代码编写规范

前端代码编写规范   规范的目的 前端编程人员书写前端代码遵循一定的规范。按照规范编写代码可以使代码具有统一的风格，既可以提高团队协作效率，规范文件管理，可以减小一些错误风险，也有利于项目的代码维护和后期扩展。 规范的内容 前端代码主要包括html、css和JavaScript代码，分别负责页面的结构、表现和行为，严格保证三者的分离，尽量让三者没有太多的交...

css选择符的渲染效率

　　CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CSS选择符模式，尽量编写高效的CSS选择符，从而加快页面的渲染速度，缩短页面呈现时间。 　　我们先来看一下safari和webkit的架构师David Hyatt的两段话： 样式系统从最右边的选择符开始向左...

css3 animation 属性众妙

转自：凹凸实验室（https://aotu.io/notes/2016/11/28/css3-animation-properties/） 本文不会详细介绍每个 css3 animation 属性（需要了解的同学可先移步 MDN），而是结合实际的开发经验，介绍 css3 animation 属性的一些使用场景及技巧。 1. animation-delay...

4、HTML和CSS进阶知识

HTML和CSS进阶知识 一、HTML中常用的块元素（block）和行内元素（inline） 　　常见的块元素（block）：p、h1--h6、div、ul、ol、dl、hr 　　常见的行内元素（inline）：b、i、em、strong、small、sub、sup、a、span、br、 　　在css中，可以通过display属性实现block元素和inl...

CSS对各个浏览器兼容技巧HACK技巧

*   ie6和ie7都可以识别_   只有ie6可以识别\0  只有ie8可以识别:root 只有ie9可以识别  关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK HACK概念： 不同的浏览器，比如Internet Explorer 6,...

vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

转载原文：https://www.cnblogs.com/goloving/p/8855794.html iconfont字体图标使用就不多说了，大致是几部： 1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压 2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码 3、在main.js导入iconfont.c...

最新文章

随机推荐

思享工具箱导航