绝对定位的应用

最新推荐文章于 2023-02-24 20:51:07 发布

曹莓养乐多多

最新推荐文章于 2023-02-24 20:51:07 发布

阅读量308

点赞数 1

文章标签： elementui css html

本文链接：https://blog.csdn.net/weixin_52474888/article/details/123411229

版权

这篇博客探讨了如何利用CSS中的绝对定位和margin属性，将元素在页面上实现垂直水平居中。通过创建两个具有不同宽高比的div元素，并应用相同的样式，展示了如何确保十字架形状在任何大小的浏览器窗口中都能保持居中对齐。这种方法对于前端开发人员来说是实现响应式布局的重要技巧。

摘要由CSDN通过智能技术生成

作业要求：使十字架在页面的垂直水平居中显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 300px;
				height: 100px;
				background-color: #FF00FE;
			}
			.box1 {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 300px;
				background-color: #FF00FE;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box1"></div>
	</body>
</html>

代码里面使用到的 position: absolute;就是绝对定位，它外面没有包含框，就相当于浏览器定位。

而绝对定位+marign，就可以让明确宽高的盒子水平垂直居中于浏览器。