CSS绝对居中样式（不论窗口尺寸）

最新推荐文章于 2023-11-08 10:48:48 发布

95后程序员

最新推荐文章于 2023-11-08 10:48:48 发布

阅读量828

点赞数

分类专栏：前端文章标签： css样式居中效果

本文链接：https://blog.csdn.net/qq_37618667/article/details/79240047

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现效果：

不管窗口尺寸大小，都可以实现水平和垂直居中

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>居中效果</title>
		<link href="style.css" rel="stylesheet" />
		<style type="text/css">
			.panel{
				width: 0;
				height: 0;
				position: fixed;
				left: 50%;
				right: 50%;
				top: 50%;
				bottom: 50%;
			}
			
			.image{
				width: 500px;
				height: 500px;
				margin-left: -250px;
				margin-top: -250px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="panel">
			<div class="image">
				
			</div>			
		</div>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

95后程序员

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS绝对居中样式（不论窗口尺寸）

实现效果：不管窗口尺寸大小，都可以实现水平和垂直居中代码如下：居中效果 .panel{ width: 0; height: 0; position: fixed; left: 50%; right: 50%; top: 50%; bottom: 50%; } .image
复制链接

扫一扫