纯css实现上下左右居中

作者: 亖呉?盀
来源: 51数据库
2022-09-21

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input{
				outline:none;
			}
			.dialog_mask{
				top:0;
				left:0;
				z-index:100;
				position:absolute;
				text-align:center;
				width:100%;
				height:100%;
				background:#a0a0a0;
				white-space:nowrap;
			}
			
			.dialog_mask:after{
				content:" ";
				height:100%;
				display:inline-block;
				vertical-align:middle;
			}
			
			.dialog{
				font-size:14px;
				text-align:left;
				min-width:300px;
				min-height:80px;
				display:inline-block;
				vertical-align:middle;
				background:#ffffff;
			}
			
			.head{
				margin:5px;
				padding:2px;
				position:relative;
				background:#15a4fa;
				border-bottom:1px solid #15a4fa;
			}
			.title{
				color:#fff;
				display:inline-block;
				vertical-align:middle;
			}
			
			.close_btn{
				width:20px;
				height:20px;
				top:50%;
				right:2px;
				margin-top:-9px;
				position:absolute;
				display:inline-block;
				float:right;
				background:url("close_btn.png");
			}
			
			.close_btn:hover{
				cursor:pointer;
				background-position:-20px 0;
			}
			
			.body{
				padding:8px;
				height:100%;
				
			}
		</style>
	</head>
	<body>
		<div >
			<div  align="middle;">
				<div >
					<div >创建项目</div>
					<span  title="关闭"></span>
				</div>
				<div >
					<form>
						项目名：<input value="" name="project_name"/>
						<div >
							<button>确定</button>
							<button>取消</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script>
		
	</script>
</html>

推荐阅读