vh属性-- 一个永远垂直居中的弹出框

 

下面的demo，无论浏览器大小如何改变，滚动条是否滚动，弹出框永远水平垂直居中

 

 

<html>
<head>
	<title></title>
</head>
<style type="text/css">
.wrap{
	  position: absolute;
	  top:0;
	  width: 100%;
	  height: 100%;
	  background-color: #CEC6C6;
	  opacity: 0.75;
	  z-index: 999;
	}

.alertbox{
  position: fixed; /*这是关键*/
  z-index: 1000;
  width: 270px;
  height:163px;
  padding: 20px 0;
  background-color: #fff;
  text-align: center;
  top:50vh;
  margin-top: -100px;
  left: 50%;
  margin-left: -135px;
  border-radius: 5px;
}
  .alertbox h2{
    font-size: 17px;
    color: #030303;
    margin: 0 13px;
  }
  .alertbox p{
    font-size: 13px;
    color: #000;
    margin:8px 13px 40px;
  }
  .alertbox .ok-button{
    position: absolute;
    bottom: 20px;
    width: 100%;
    color:#037AFF;
    font-size: 17px;
    height: 30px;
    line-height: 40px;
    border-top:1px solid #B7B7B7;
    cursor: pointer;
  }

</style>
<body>
	<div class='wrap-box'>
		<div class='wrap'></div>
		<div class='alertbox'><h2>hello</h2>
			<p>hello</p>
			<div class='ok-button'>OK</div>
		</div>
	</div>
</body>
</html>

　　

posted @ 2015-08-19 17:53  Bigdots  阅读(424)  评论(0)  编辑  收藏  举报