你的位置:首页 > 网页设计

[网页设计]div+css实现未知宽高元素垂直水平居中


div+css实现未知宽高元素垂直水平居中。很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>div+css实现未知宽高元素垂直水平居中</title>  <style>    * {      margin: 0;      padding: 0;    }    .box {      width: 1120px;      height: 968px;      text-align: center;      background: #eaeaea;    }    .box span {      display: inline-block;      height: 100%;      vertical-align: middle;    }    .box div {      background: #ccc;      /*vertical-align: middle; 图片的话就用这个属性,div的话就用 display:block属性*/      display: inline;    }  </style></head><body><div class="box">  <!--<img src="0.jpg" alt=""/>-->  <div>ASDEWQ</div>  <span></span></div></body></html>