垂直居中及容器内图片垂直居中的CSS解决方法

最新推荐文章于 2021-08-03 18:15:23 发布
最新推荐文章于 2021-08-03 18:15:23 发布
阅读量140 收藏
点赞数
原文链接：http://www.cnblogs.com/MaxWoods/archive/2008/10/23/1317712.html
版权

方法一:

<style type="text/css">
<!--
* {margin:0;padding:0}
div {
  width:500px;
  height:500px;
  border:1px solid #666;
  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%;
  }
-->
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
body {
  margin:0;padding:0
}
div {
  width:500px;
  height:500px;
  line-height:500px;
  border:1px solid #666;
  overflow:hidden;
  position:relative;
  text-align:center;
}
div p {
  position:static;
  +position:absolute;
  top:50%
}
img {
  position:static;
  +position:relative;
  top:-50%;left:-50%;
  vertical-align:middle
}
p:after {
  content:".";font-size:1px;
  visibility:hidden
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>

方法三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
  width:500px;
  height:500px;
  line-height:500px;
  border:1px solid #666;
  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%;
  vertical-align:middle
}
-->
</style>
</head>
<body>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</body>
</html>

方法四（针对背景图片居中）:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
div {
  width:500px;border:1px solid #666;
  height:500px;
  background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>


 

转载于:https://www.cnblogs.com/MaxWoods/archive/2008/10/23/1317712.html

天为我蓝
关注
未知大小的图片在已知容器中的垂直居中和水平居中
03-12
δ知大小的图片在已知容器中的垂直居中和水平居中，一直是困扰大家的问题，今天西西带给大家一个简单的实现办法，详见css文件，此代码兼容各个浏览器，源码库推荐下载！
CSS解决页面图片水平垂直居中问题的方法
01-19
有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一...
图片在容器里水平垂直居中
u011927449的博客
01-18 513
一、水平居中 .wrap{ height: 200px; width:200px; text-align: center; } .wa...
如何设置图片、文字在容器（div）中垂直居中的显示？
China_Guanq的博客
01-06 3903
1、设置文字在div 容器中垂直居中显示 <div style="border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;"> <span>文字垂直居中</span> </div>2、设置图片在div 容器中垂直居中显示 <div style="border: 1px #f0
图片垂直居中在容器中
xiamoziqian的博客
11-29 126
div{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justif...
css图片垂直居中 css中如何实现图片垂直居中
12-13
在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...
CSS设置文字图片垂直居中的方法总结
12-02
在CSS布局中，垂直居中是一项常见的需求...当然，CSS还有其他方法实现垂直居中，如Flexbox和Grid布局，它们在现代浏览器中提供了更强大、更灵活的解决方案，但在兼容旧版浏览器的情况下，本文提到的方法仍然有其价值。
CSS网页布局：div垂直居中的各种方法
12-10
这种方法在大多数浏览器中都能正常工作，但需要注意的是，对于IE6及以下版本，它不适用于图片的垂直居中。 2. **多行未知高度的文字垂直居中** 如果内容的高度是可变的，我们可以利用`padding`来模拟垂直居中。...
div垂直居中-CSS元素垂直居中方法的探究
06-11
课程提供的两个PDF文件"div垂直居中-CSS元素垂直居中方法的探究-20181030181528302_98662.pdf"和"div垂直居中-CSS元素垂直居中方法的探究-2018103018153623_11191.pdf"很可能是详细的教程资料，包含了具体的代码示例...
css-文字和图片在容器内垂直居中的简单方法
qq_25983579的博客
08-16 888
方法一、使用line-heigh使多行文字居中或图片居中 把文字包裹在一个inline-block元素中vertical-align middle，外部元素line-heigh等于高度 文字居中 <div class="box1"> <span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中</span> </div> .box1{
实现img图片在指定容器中水平垂直居中
weixin_30437337的博客
09-15 279
父元素display:table-cell & vertical-align:middle div{ display:table-cell; vertical-align:middle; text-align:center; width:100px; height:100px; } img{ width:80px; ...
让文本或图片在div容器中垂直居中
轻尘居
03-06 1413
来自http://www.cnitblog.com/2013/archive/2006/02/25/6931.html让文本或图片在div容器中垂直居中,相信这个例子很多朋友都想知道.这是在一个老外的站点发现的.div id="outer">  div id="middle">    div id="inner">      any text      any height      an
让图片在DIV容器里面水平垂直居中的方法
城市漫步者
05-09 557
1.定义dom结构 2.定义css样式 div{ width: 600px; height: 600px; border:1px solid red; text-align: center; } span{ height: 100%; display: inline-block; vertica
图片的水平垂直居中 css,CSS图片垂直居中和水平居中
weixin_35161750的博客
08-03 226
* {padding:0;margin:0}html {min-height:101%}body {font-family:verdana,arial,tahoma;font-size:12px;color:#333}div {margin:0 auto}ul,ol,li {list-style:none}a {text-decoration:none;word-wrap:break-word}a...
图片垂直居中
weixin_30394633的博客
09-25 87
图片垂直居中 图片在容器中垂直居中，有几种方式： 1、放在table里 （最简单直接的方法） <table style="height:200px;border:1px solid #000;"> <tr> <td> <img src="http://pics.taobao.com/bao...
解决未知大小图片在已知容器中垂直居中的三种方法
trace的技术备忘专栏
02-10 2684
方法一:简单有效,但额外添加了一个P元素. 未知大小图片在已知大小容器水平/垂直居中 <!-- div {border:1px solid #000; width:300px; height:300px; text-align:center; /*设置水平居中*/position:relative; display:table-cell; v
CSS技巧：告别table，多种方法实现页面图片灵活水平垂直居中
解决页面图片的水平垂直居中问题，前端开发者需要根据实际需求灵活运用CSS的不同定位技术，比如 Flexbox、Grid、绝对定位等，并考虑兼容性和性能优化。通过这种方式，可以创建出美观且适应各种场景的产品展示页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值