【CSS】盒子居中

2024-04-22 18:08:06
开发
13

效果图

同时实现盒子与文字的居中

代码及其解释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 500px;
				height: 500px;
				background-color: #B8860B;
				margin: 0 auto;
				/* 当left、right两个方向都设为auto时，自动水平居中，比如这里就是，上下为0，左右为auto */
				border: 1px solid #B8860B;
				/* 一定要将大盒子中设置边框，不然的话系统会将大小盒子看成一个整体，当你要把小盒子在大盒子内向下移动时，会整体移动 */
				
				margin-top: 150px;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: greenyellow;
				margin: 0 auto;
				text-align: center;
				line-height: 100px;
				/* 文字高度=盒子高度时文字才能完全居中 */
				margin-top: 200px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				哈哈哈
			</div>
		</div>
	</body>
</html>

补充解释

/* 一定要将大盒子中设置边框，不然的话系统会将大小盒子看成一个整体，当你要把小盒子在大盒子内向下移动时，会整体移动 */

这句话可能会引起一些迷惑

这是因为没有边框时：

可以看出，此时小盒子并没有居中效果，并且此时小盒子也是有margin值的，但无法实现居中操作

今天的分享就到此结束啦~~希望能帮到您！

原文地址:https://blog.csdn.net/2301_79982543/article/details/137792461 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1782350658679214080.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部