【前端学习笔记 CSS系列七】绝对定位水平居中

最新推荐文章于 2024-03-27 20:04:50 发布

GUANYX~

最新推荐文章于 2024-03-27 20:04:50 发布

阅读量492

点赞数

分类专栏：前端学习笔记文章标签：前端 css css3

本文链接：https://blog.csdn.net/gyx1549624673/article/details/122890904

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一、效果

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.father {
				width: 800px;
				height: 600px;
				background-color: pink;
				position: relative;
				margin: 0 auto;
			}
			.son {
				width: 100px;
				height: 60px;
				background-color: purple;
				position: absolute;
				/* margin: 0 auto;  绝对定位的盒子无法再用margin实现居中效果*/
				left: 50%;  
				/* 先走父盒子的一半 */
				margin-left: -50px;
				/* 再走自己外边距负一半值就可以了 */
				top: 50%;
				margin-top: -30px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

GUANYX~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记 CSS系列七】绝对定位水平居中

一、效果二、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .father { width: 800px; height: 600px; background-color: pink; position: relative; margin: 0 aut
复制链接

扫一扫