您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编给大家分享一下CSS盒子居中常用的方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
第一种:
用css的position属性
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: red; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } </style> <div class="div1"> <div class="div2 "> </div> </div>
效果图:
第二种:
利用css3的新增属性table-cell, vertical-align:middle;
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: table-cell; vertical-align: middle; } .div2 { width: 40px; height: 40px; background-color: red; margin: auto; } </style> <div class="div1"> <div class="div2"> </div> </div>
效果:
第三种:
利用flexbox布局
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: flex; /*!*flex-direction: column;*!可写可不写*/ justify-content: center; align-items: center; } .div2 { height: 40px; width: 40px; background-color: red; } </style> <div class="div1 "> <div class="div2 "> </div> </div>
效果:
第四种:
利用transform的属性(缺点:需要支持Html5)
<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { height: 40px; width: 40px; background-color: red; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <div class="div1 "> <div class="div2 "> </div> </div>
效果图:
看完了这篇文章,相信你对“CSS盒子居中常用的方法有哪些”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。