模态框中水平垂直居的问题
2018-06-24 01:29:20来源:未知 阅读 ()
![新老客户大回馈,云服务器低至5折](/info/templets/default/images/760x90_D.jpg)
大家好,今天我们来说一下在写模态框的时候怎么使里面的内容垂直水平居中,我们先把目光放得简单一点,
这个问题其实就等同于怎么让一个div垂直水平居中,那我们怎么来实现这个问题呢?有5种解决办法。
首先,第一种情况,我们知道div1宽高的情况下:
<div id="div1"></div #div1{
width: 200px;
height: 100px;
background: #54fa45;
position: absolute;
left:50%;
top:50%;
margin-left:-100px; //设置div1的左边距为宽度的一半
margin-top:-50px; //设置div1的上边距为高度的一半
}
第二种情况下:不知道div1的宽高,就好比设置图片的垂直水平居中:
<img src="img.png" alt="">
img{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
这种情况其实很简单,给图片一个绝对定位,然后上下左右都为0,最后margin:auto;
第三种情况:利用display:table
<div id="box">
<div id="div1">
<img src="img/map-pin.png" alt="">
</div>
</div>
html,body{
height: 100%;
overflow:hidden;
}
#box{
width:100%;
height:100%;
background: #dbffd8;
display:table;
}
#div1{
height:100%;
width:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
第四种情况:利用display:table-cell;
<div id="box">
<div id="div1">
<img src="img/map-pin.png" alt="">
</div>
</div>
html,body{
height: 100%;
overflow:hidden;
}
#box{
width:100%;
height:100%;
background: #dbffd8;
display:table;
}
#div1{
height:100%;
width:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
最后一种就是利用盒子的怪异盒模型了
<div id="box">
<img src="img/map-pin.png" alt="">
</div>
html,body{
height: 100%;
overflow:hidden;
}
#box{
width:100%;
height:100%;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
}
这就是我对元素水平居中的理解,你们学会了吗?
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- 自学web前端达到什么水平,才能满足求职的标准? 2020-05-04
- Bootstrap4 轮播+模态框+提示框+弹出框 2020-04-16
- CSS实现元素居中样式(水平居中和垂直居中) 2020-03-29
- HTML标题重要性与html水平线和注释 2020-03-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash