• 技术文章 >web前端 >css教程

    css盒子中的图如何居中

    青灯夜游青灯夜游2021-02-23 15:59:27原创59

    居中方法:1、给盒子设置相对定位、图片设置绝对定位;然后调整图片位置即可。2、将img图片元素设置为块级元素;然后利用table-cell、“vertical-align:middle;”来居中。3、利用flexbox布局来居中。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css让图片在div盒子里居中

    第一种:用css的position属性

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.div1 {
    				width: 200px;
    				height: 200px;
    				border: 1px solid #000000;
    				position: relative;
    			}
    			
    			img {
    				width: 100px;
    				height: 100px; 
    				position: absolute;
    				margin: auto;
    				top: 0;
    				left: 0;
    				right: 0;
    				bottom: 0;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div class="div1">
    			<img src="img/1.jpg" />
    		</div>
    	</body>
    
    </html>

    效果图:

    1.png

    第二种:利用css3的新增属性table-cell, vertical-align:middle;

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.div {
    				width: 200px;
    				height: 200px;
    				border: 1px solid #000000;
    				display: table-cell;
                	vertical-align: middle;
    			}
    			
    			img {
    				width: 100px;
    				height: 100px;
    				display: block;
    				margin: auto;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div class="div">
    			<img src="img/1.jpg" />
    		</div>
    	</body>
    
    </html>

    效果:

    2.png

    【推荐教程:CSS视频教程

    第三种:利用flexbox布局

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.div {
    				width: 200px;
    				height: 200px;
    				border: 1px solid #000000;
    				display: flex;
    				/*!*flex-direction: column;*!可写可不写*/
    				justify-content: center;
    				align-items: center;
    			}
    			
    			img {
    				width: 100px;
    				height: 100px;
    				display: block;
    				margin: auto;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div class="div">
    			<img src="img/1.jpg" />
    		</div>
    	</body>
    
    </html>

    效果:

    3.png

    第四种:利用transform的属性(缺点:需要支持Html5)

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.div {
    				width: 200px;
    				height: 200px;
    				border: 1px solid #000000;
    				position: relative;
    			}
    			
    			img {
    				width: 100px;
    				height: 100px;
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				-ms-transform: translate(-50%, -50%);
    				-moz-transform: translate(-50%, -50%);
    				-o-transform: translate(-50%, -50%);
    				transform: translate(-50%, -50%);
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div class="div">
    			<img src="img/1.jpg" />
    		</div>
    	</body>
    
    </html>

    效果图:

    4.png

    更多编程相关知识,请访问:编程视频!!

    以上就是css盒子中的图如何居中的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css 居中
    上一篇:在css中float属性的属性值有哪些 下一篇:CSS层样式表有哪几种类型
    第15期线上培训班

    相关文章推荐

    • css怎么设置变成小手• 请问css的作用是什么• css具备什么特点• css的选择器不包括什么• css怎么让div文字竖着

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网