CSS布局案例 9-51 网页弹窗居中效果

一醉南柯

已于 2024-01-04 17:03:11 修改

阅读量515

点赞数

分类专栏： Web前端开发文章标签： css 前端 javascript

于 2021-05-05 15:31:27 首次发布

本文链接：https://blog.csdn.net/dpl12/article/details/116425817

版权

Web前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

前言
实现过程

前言

使用css3实现网页弹窗居中效果。

实现过程

1.步骤

网页弹窗居中效果实现四个方法:
	  1、定位+magin值 
	  2、定位+transform的移动
	  3、left:0 right:0 top:0 bottom:0 magin:auto
	  4、弹性盒

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/* 第1种方法:固定定位+magin值 */
			/* p{
				width: 500px;
				height: 500px;
				background: red;
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left: -250px;
				margin-top: -250px;
			} */
			/* 第2种:定位+transform的移动 translate(水平位移,垂直位移)*/
		 /* p{
				width: 500px;
				height: 500px;
				background: red;
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-250px,-250px);
			} */
			/* 第3种:技巧方法 magin:auto */
		/* 	p{
				width: 500px;
				height: 500px;
				background: red;
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			} */
			/* 第4种:弹性盒,设置父布局水平和垂直100% */
			html,body{
				height: 100%;
				width: 100%;
			}
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
			}
			p{
				width: 500px;
				height: 500px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p></p>
	</body>
</html>