内容居中 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
	<style>
		.auth-wrap {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: 99999;
			background: rgba(0, 0, 0, 0.3);
			text-align: center;
		}
		.auth-wrap::after {
			content: "";
			display: inline-block;
			height: 100%;
			width: 0;
			vertical-align: middle;
		}
		.message-box {
			display: inline-block;
			width: 420px;
			height: 300px;			
			vertical-align: middle;
			background-color: #fff;
			border-radius: 4px;
			border: 1px solid #ebeef5;
			font-size: 18px;
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			text-align: left;
			overflow: hidden;
			backface-visibility: hidden;
		}
	</style>
</head>
<body>

	<div class="auth-wrap">
		<div class="message-box"></div>
	</div>

</body>
</html>

　　

 

posted @ 2021-09-17 15:21  黄伟伟(huangweiwei)  阅读(34)  评论(0)    收藏  举报