image居中、div嵌套div上下左右居中

最新推荐文章于 2024-07-12 10:42:39 发布

自在飞花轻似梦paofu

最新推荐文章于 2024-07-12 10:42:39 发布

阅读量3.8k

点赞数

分类专栏： CSS 文章标签： position margin

原创珍贵，转载请声明出处。

本文链接：https://blog.csdn.net/weixin_42277214/article/details/89716725

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、如何让图片左右居中？
把图片放在div中，设置div：margin:0 auto;，这样div左右居中，包含在里面的图片也会随之居中。

<head>
    <meta charset="utf-8">
    <title>居中</title>
    <style type="text/css">
    	div{
    		width:200px;
    		height:117px;
    		border:10px solid red;
    		margin:0 auto; //div居中
    	}
    	
    </style>
</head>
<body>
	<div> 
		<img src="003.jpg">
    </div>
</body> </html>

效果图：
在这里插入图片描述
2、div嵌套div如何上下左右居中？
常用方法一之定位：

<head>
    <meta charset="utf-8">
    <title>居中</title>
    <style type="text/css">
    	body{
    		margin: 0;
    		padding:0;
    	}
    	/* 子绝父相 */
    	.out{
    		width:400px;
    		height:234px;
    		background-color:pink;
  		    position:relative;
    	}
    	.inner{
    		width:200px;
    		height:117px;
    		background-color: red;
    		position:absolute;
    		top:50%;
    		left:50%;
    		margin-top:-58.5px;
    		margin-left:-100px;
    		
    	}
    	span{
    		
    	}
    </style>
</head>
<body>
	<div class="out">
		 <div class="inner"> </div>
	</div>
</body> </html>

效果图： 在这里插入图片描述

分割线-------------------------------------------------------------------------------分割线

常用方法二之定位：

<head>
    <meta charset="utf-8">
    <title>居中</title>
    <style type="text/css">
    	body{
    		margin: 0;
    		padding:0;
    	}
    	/* 子绝父相 */
    	.out{
    		width:400px;
    		height:234px;
    		background-color:pink;
  	  	    position:relative;
    	}
    	.inner{
    		width:200px;
    		height:117px;
    		background-color: red;
    		position:absolute;
    		margin: auto;
    		top:0;
    		right:0;
    		bottom:0;
    		left:0;
    	}
    </style>
</head>
<body>
	<div class="out">
	   <div class="inner"></div>
	</div>
</body> </html>

效果图： 在这里插入图片描述