纯css实现上下左右居中代码,Css代码库,德仔网

代码语言

代码分类

【Css】纯css实现上下左右居中

作者:水牛叔叔 / 发布于2014/8/4/ 1028


	<!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 class="dialog_mask">
	 <div class="dialog" align="middle;">
	 <div class="head">
	 <div class="title">创建项目</div>
	 <span class="close_btn" title="关闭"></span>
	 </div>
	 <div class="body">
	 <form>
	 项目名：<input value="" name="project_name"/>
	 <div style="display:inline-block;">
	 <button>确定</button>
	 <button>取消</button>
	 </div>
	 </form>
	 </div>
	 </div>
	 </div>
	 </body>
	 <script>
	
	 </script>
	</html>

试试其它关键字

同语言下

可能有用的

水牛叔叔贡献的其它代码(3)