一、父元素的flex布局实现元素的水平垂直居中
示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .parent{ display:flex; display:-webkit-flex; justify-content: center; align-items: center; width:100%; height: 200px; background-color: #c43; } .child{ width:300px; height:100px; background-color: #c4235b; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
效果图如下:
二、绝对定位&负margin值实现元素水平垂直居中
注意:元素本身需要确定宽度和高度
示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:300px; height:100px; background-color: #873cac; position:absolute; top:50%; left:50%; margin-left: -150px; margin-top:-50px; } </style> </head> <body> <div></div> </body> </html>
效果图如下:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
之前本人使用React + AntDesign 实现了一个简单的时序图,但是后来有了更复杂的...
微信搜索【 脑子进煎鱼了 】关注这一只爆肝煎鱼。本文 GitHub github.com/eddycj...
我们之前已经 分享 了 Proto DataStore 和 Preferences DataStore 的使用方法。...
也有很多人问我学习时就看哪些书,下面我想想新手推荐一些书(也是我学习时看过...
最近和网路前辈讨论到「广告」,他说了一段蛮有趣的看法:网路广告的总金额好像...
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记...
h5活动需要插入音频,但又需要自定义样式,于是自己写咯 html XML/HTML Code 复...
微信小程序 4 年半,知晓云 4 年,伴随着移动互联网的快速发展,知晓云的产品与...
如果你以自由开发者的身份提供服务,那么你在如何给项目定价上就有了很大的发言...
最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方...