css图片实现水平、垂直居中

最新推荐文章于 2021-06-04 20:25:38 发布

寂寞的六一

最新推荐文章于 2021-06-04 20:25:38 发布

阅读量461

点赞数

文章标签：图片居中

本文链接：https://blog.csdn.net/q469179122/article/details/47059811

版权

一、针对图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div { width: 1000px;height: 700px ;background: #dedede;}
	</style>
</head>
<body>
	<div>
		<img src="http://dummyimage.com/800x600/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
	</div>
</body>
</html>

方法一：已知div高度和img高度，主要控制div的padding-top

div {
  width: 1000px;
  height: 700px;
  background: #dedede;
  padding-top: 100px; //padding-top必须设置为div.height()-img.height()
}img {
  display: block;
  margin: 0 auto;
} 
     
 
    
 方法二：已知div高度和img高度，主要控制img的padding-top 
    
 
    img {
  display: block;
  margin: 0 auto;
  padding-top: 50px;  //(div.height()-img.height()/2
} 
    
 方法三：text-align结合padding 
   
 
    img {
  padding-top: 50px;
} 
    <pre name="code" class="html">div {
 position:relative;
  width: 1000px;
  height: 700px;
  background: #dedede;
} 
    
 
     
    
 
   

     方法四：绝对定位结合left和top 
   
 
    img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px; //img.width()/2
  margin-top: -300px;  //img.height()/2
} 
    div {
  width: 1000px;
  height: 700px;
  background: #dedede;
  position:relative
} 
    
 
    
 
   
 
    
 
   

寂寞的六一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css图片实现水平、垂直居中

一、针对图片 Document div { width: 1000px;height: 700px ;background: #dedede;} 方法一：已知div高度和img高度，主要控制div的padding-topdiv { width: 1000px; height: 700px; background: #dede
复制链接

扫一扫