【学习笔记】CSS利用定位将盒子居中对齐

最新推荐文章于 2022-08-28 09:56:31 发布

微凉の月色

最新推荐文章于 2022-08-28 09:56:31 发布

阅读量281

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_45615572/article/details/115032779

版权

在样式设计中，我们会经常遇到居中问题，普通盒子对齐，可以用margin: auto来解决，比较方便。
但当一个父盒子下面有两个子元素，令其中一个子元素居中就不太方便

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				margin: 100px auto;
			}
			.box2 {
				width: 100px;
				height: 100px;
				margin: auto;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<span>123</span>
			<div class="box2"></div>
		</div>
	</body>

运行结果如下：
在这里插入图片描述可以看到，虽然box2相对于box1水平居中了，但无法置顶居中，因为box2会受到<span>123</span>的排版影响。如果想让box2自由的居中对齐，应该想到用绝对定位使其脱离标准流
下面是利用定位来解决的代码:

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				position: relative;
				width: 200px;
				height: 200px;
				background-color: skyblue;
				margin: 100px auto;	
			}
			.box2 {
				position: absolute;
				/* 先将box2移动到 左边框离父盒子左边框的距离为
				父盒子宽的50% */
				left: 50%;
				top: 0;
				/* 然后往右移动box2宽度的一半， */
				margin-left: -50px;
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<span>123</span>
			<div class="box2"></div>
		</div>
	</body>

运行结果：
在这里插入图片描述同理还可以将box2靠右垂直居中对齐
只需要改动以下代码：

	top: 50%;
	right: 0;
	margin-top: -50px;

运行结果如下：
在这里插入图片描述本人前端初学菜鸟，大家有更好的建议或方法欢迎指出。

微凉の月色

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】CSS利用定位将盒子居中对齐

在样式设计中，我们会经常遇到居中问题，普通盒子对齐，可以用margin: auto来解决，比较方便。但当一个父盒子下面有两个子元素，令其中一个子元素居中就不太方便 <head> <meta charset="utf-8"> <title></title> <style> .box1 { width: 200px; height: 200px; background-color: skyblue;
复制链接

扫一扫