CSS让图片(垂直水平居中、垂直居中、水平居中)方法

最新推荐文章于 2024-10-09 22:33:53 发布

换日线°

最新推荐文章于 2024-10-09 22:33:53 发布

阅读量8.3k

点赞数 5

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43764578/article/details/105550451

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

图片水平垂直居中

如下图所示
在这里插入图片描述
1.使用text-align: center配合line-height完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
		line-height: 300px;
	}
	.vertical>img{
		margin-top: calc((300px - 100px)/2);
		width: 100px; 
		height: 100px;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

2.使用text-align: center配合position: absolute完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
		position: relative;
	}
	.vertical>img{
		position: absolute;
		top: 50%;
		margin-top: -50px;
		width: 100px; 
		height: 100px;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

3.使用text-align: center配合display: flex完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.vertical>img{
		margin: 0 auto;
		width: 100px; 
		height: 100px;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

4.使用text-align: center配合display: table完成水平垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		display: table;
	}
	.vertical>div{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.vertical>div>img{
		width: 100px;
		height: 100px;
	}



	<!-- HTML -->
	<div class="vertical">
		<div>
			<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
		</div>
	</div>

图片垂直居中

如下图所示
在这里插入图片描述
1.使用display: flex完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height: 300px;
		background-color: #ddd;
		display: flex;
		align-items: center;
	}
	.vertical>img{
		width: 100px;
		height: 100px;
	}




	<!-- HTML-->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

2.使用绝对定位完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		position: relative;
	}
	.vertical>img{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 50%;
		margin-top: -50px;
	}
	
	

	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

3.使用display: table完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		display: table;
	}
	.vertical>div{
		display: table-cell;
		vertical-align: middle;
	}
	.vertical>div>img{
		width: 100px;
		height: 100px;
	}



	<!-- HTML -->
	<div class="vertical">
		<div>
			<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
		</div>
	</div>

4.使用line-height完成垂直居中

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		line-height: 300px;
	}
	.vertical>img{
		margin-top: calc((300px - 100px)/2);
		width: 100px;
		height: 100px;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

图片水平居中

如下图所示
在这里插入图片描述
1.使用text-align: center完成水平居中(如若不行在img属性加上margin:0 auto)

	/* CSS */
	.vertical{
		width: 100%;
		height:300px;
		background-color: #ddd;
		text-align: center;
	}
	.vertical>img{
		width: 100px;
		height: 100px;
	}



	<!-- HTML -->
	<div class="vertical">
		<img src="https://img2.woyaogexing.com/2020/03/29/d1314050c4ac44b2a8df9f4d74f7af16!1242x9999.jpeg">
	</div>

有什么问题欢迎评论留言，我会及时回复你的