盒子和图片的水平垂直居中

最新推荐文章于 2023-12-17 17:41:20 发布

Kong_十六

最新推荐文章于 2023-12-17 17:41:20 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web—第一阶段

本文链接：https://blog.csdn.net/qq_42383764/article/details/103989029

Web—第一阶段专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现网页元素的水平垂直居中，包括未知和已知容器尺寸的情况，以及图片在页面中的精确居中方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			*{
				/* 清楚默认样式 */
				margin: 0;
				padding: 0;
			}
			/* 
			*让盒子水平垂直居中 
			*	1.不知包含盒子的块级元素的宽高
			*	2.已知包含盒子的块级元素的宽高
			*/
			.box{
				/* 不知包含块的宽高，直接设置盒子水平垂直居中 */
				width: 800px;
				height: 800px;
				border: 1px solid pink;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;/* 一定要设置auto */
			}
			.box1{
				/* 在已知包含块的宽高设置盒子居中 */
				position: absolute;
				width: 400px;
				height: 600px;
				border: 2px solid black;
				left: 50%;
				top: 50%;
				margin-left: -200px;/* 盒子自己的宽度/2 */
				margin-top: -300px;/* 盒子自己的高度/2 */
			}
			
			
			/* 图片水平垂直居中 */
			#photo{
				text-align: center;
				height: 1000px;/* 一定要给包含图片的元素一个高度 */
				border:3px solid pink;
			}
			
			/* 在设置图片的时候一定要设置为行内块元素
			 *	给包含图片的盒子设置高度
			 *		
			 *
			 */
			#photo:after{
				display: inline-block;/* 一定要设置为行内块级元素 */
				content: '';
				/* border: 1px solid aqua;    用来调试基线的 */
				height: 100%;/* 继承父元素的高度为图片垂直居中做基线 */
				vertical-align: middle;/* 设置垂直方向居中 */
			}
			#photo img{
				vertical-align: middle;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
			</div>
		</div>
		<br><br><br>
		<!-- 图片水平垂直居中 -->
		<div id="photo">
			<img src="../img/01.JPG" >
		</div>
	</body>
</html>