web页面开发过程中让图片垂直居中的三种方法

关注

原创最新推荐文章于 2026-04-18 03:44:43 发布 1.3w 阅读 AI 写同款· GEO 优化 ›

网页设计中图片垂直/水平居中的简易实现方法 Flexbox是CSS3中引入的一种新的布局模式，它的全称是Flexible Box Layout，意为“弹性盒子布局”。与传统布局方式相比，Flexbox更加灵活，能够轻松应对不同屏幕尺寸和设备，且代码简洁，易于理解和维护。Flexbox布局由容器（flex container）和项目（flex item）组成，通过定义容器的属性来控制项目的排列方式。阅读详情

<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片居中</title>
	<style>
     *{
     	padding:0;
     	margin:0;
     }
     /*方法一*/
/*     .view{
     	width: 600px;
     	height: 600px;
     	border:1px solid red;
     	text-align: center;
     	display: table-cell;
     	vertical-align: middle;	
     }*/

     /*方法二*/
/*     .view{
     	width: 600px;
     	height: 600px;
     	border:1px solid red;
     	text-align: center;
     }
     .view img{
     	vertical-align: middle;
     }
     .view span{
     	height: 100%;
     	width:0;
     	display: inline-block;
     	vertical-align: middle;
     }*/

     /*方法三*/
     .view{
     	width: 600px;
     	height: 600px;
     	border:1px solid red;
     	background: url(images/1.jpg) no-repeat;
     	background-position: 50% 50%;
     }
	</style>
</head>
<body>
	<!--
	图片大小为400*300
     方法一:在view中加display:table-cell;vertical-align:middle样式;
     方法二:在img标签后加span标签,并给它如上所示的样式，img还须加vertical-align;middle样式;
     决定行高的是行内最高的元素的值:span的height:100%;
     方法三:背景法,就是让图片当做div背景，然后再调整背景的位置使之在中间位置
    -->
<!-- 	<div class="view">
		<img src="images/1.jpg" alt="">
	</div>
	<div class="view">
		<img src="images/1.jpg" alt=""><span></span>
	</div> -->
	<div class="view">
		
	</div>
</body>
</html>