详情介绍
margin方法
可以通过margin来使得div居中，通过给margin-left设置的值为父元素的宽减去子元素的宽再除以2（本例中：（400-100）/2=150px），margin-top的值为父元素的高度减去子元素的高度值再除以2（本例中:（300-100）/2=100px）
例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <style> .box{ width:400px; height: 300px; border: 1px solid #ccc; } .box1{ width:100px; height: 100px; background-color: pink; margin-left: 150px; margin-top:100px; } </style> </head> <body> <div> <div></div> </div> </body> </html> |
position方法
可以通过定位的方法来使得div垂直居中，我们可以设置子元素绝对定位，另外设置top和left值为50%，但是需要注意一点在用定位是也要设置margin值，其中margin-left与margin-right的值都为负值，且值的大小是子元素宽高的一半
例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> .box{ width:400px; height: 300px; border: 1px solid #ccc; position: relative; } .box1{ width:100px; height: 100px; background-color: pink; position: absolute; top: 50%; left: 50%; margin:-50px 0 0 -50px } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html> |
1、升级本站永久VIP，仅需【49】元即可升级 ! ! ! (升级后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。
3、站内资源均来源于网络公开发表文件或网友投稿发布，如侵犯您的权益，请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源，都不包含技术服务，请大家谅解！
5、所有资源均收集于互联网仅供学习、参考和研究，请理解这个概念，所以不能保证每个细节都符合你的需求，也可能存在未知的BUG与瑕疵，因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分)，请熟知后再支付下载！
- 上一篇：用HTML实现简单动画
- 下一篇：HTML 表单
