请按以下效果图和要求完成一个弹窗的HTML和CSS:

总体:弹窗相对于浏览器窗口固定(即滚动条拖动时不影响弹窗位置)且水平垂直居中,弹窗总宽度302px,高度未知(由内容区的内容决定),圆角半径为5px,边框为1px的实线,边框颜色为#cccccc。
标题栏:左右留白20px,高度为40px,文字为14px的微软雅黑且垂直居中,只显示单行文字且超出隐藏并显示“…”,背景色为#eeeeee。
内容区:由一个段落和一个按钮组成,四周留白20px,背景为白色,段落与按钮距离20px,字体均为12px的宋体。
段落:行高1.5倍。
按钮:水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。
关闭:宽10px、高10px、距离上边框10px,距离右边框10px,鼠标为手型,假设关闭图标相对css的路径为“../x.png”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html{
			height: 8000px;
		}
		#wrap{
			position: fixed;
			top:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};
			left: 50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};			
		}
		#container{
			width: 300px;
			border: 1px solid #ccc;
			border-radius: 5px;
                        position:relative;
			margin-top: -50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};
			margin-left: -50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};
		}
		.title{
			height: 40px;
			background-color: #eee;
			position: relative;
		}
		.title p{
			margin: 0 20px;
			font-size: 14px;
			line-height: 40px;
			text-overflow:ellipsis;
			overflow: hidden;
			white-space:nowrap;
		}
		.close{
			width: 10px;
			height: 10px;
			background-color: red;
			position: absolute;
			top:10px;
			right: 10px;
			cursor:pointer;
		}
		.content{
			background-color: #fff;
		}
		.content p{
			margin: 20px;
			font: 12px/150{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5} "宋体";
		}
		.button{
			width: 80px;
			height: 30px;
			margin: 0 auto 20px;
			display: block;
			text-align: center;
			text-decoration: none;
			color: #fff;
			line-height: 30px;
			background-color: #2E7ECB;
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div id="wrap">
	<div id="container">
		<div class="title">
			<p>标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏</p>
			<div class="close"></div>
		</div>
		<div class="content">
			<p>内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落</p>
			<a href="#" class="button">确定</a>
		</div>
	</div>
	</div>
</body>
</html>

当宽度和高度都不固定的时候实现水平垂直居中的解决方法:
需要嵌套两个div,外层div设置{ position: fixed;top:50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};left: 50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};},
内层div设置{position: relative;margin-left: -50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};margin-top: -50{977b207ee8a19a58456765e1f9ffb3661c08ee763364ab6a75c4905028941ac5};}