div水平垂直居中方法及优缺点
2018-06-24 02:07:39来源:未知 阅读 ()
代码:
<div class="father">
<div class="son">
</div>
</div>
方案一:
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】,
兼容性:,IE7及之前版本不支持
.son{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
优点:
- 简单
缺点:
- IE(IE8 beta)中无效
- 无足够空间时,
.son
被截断,但是不会有滚动条出现
方案二:
div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
优点:
- 适用于所有浏览器
- 不需要嵌套标签
缺点:
- 没有足够空间时,.son会消失(类似
div
在body
内,当用户缩小浏览器窗口,滚动条不出现的情况)
方案三:
div绝对定位水平垂直居中【Transforms 变形】
兼容性:IE8不支持;
.son{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
不定宽高的的水平垂直居中
方案四:
css不定宽高水平垂直居中,CSS3属性
.father{
display:flex; justify-content:center; align-items:center; /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .son{ background: green; width: ?px; height: ?px; }
方案五:
将父盒子设置为table-cell元素,可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构
.father{
}
.son{ background: green; width: ?px; height: ?px;
margin: auto; }
或者
.father{
}
.son{ background: green; width: ?px; height: ?px;
display:inline-block; }
优点:
.son 可以动态改变高度(不需在 CSS 中定义),.son 不会被截断
缺点:
Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签
方案六:
对子盒子实现绝对定位,利用calc计算位置
.box {
position: relative;
}
.div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: -webkit-calc((400px - 200px)/2);
top: -webkit-calc((400px - 200px)/2);
left: -moz-calc((400px - 200px)/2);
top: -moz-calc((400px - 200px)/2);
left: calc((400px - 200px)/2);
top: calc((400px - 200px)/2);
}
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css选择器补充
- DIV居中的经典方法 2020-06-13
- 两个div并排,右边div固定宽度,左边宽度自适应 2020-06-03
- 两个div并排,左边div固定宽度,右边宽度自适应 2020-06-03
- CSS选择器 2020-05-06
- 自学web前端达到什么水平,才能满足求职的标准? 2020-05-04
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