之前在给阳光房宝做小程序码的时候就需要在微信中上下左右居中，因为平时很少自己写前端，所以搜索了一些前辈的方法
最终我用的是下面这样的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>阳光房宝小程序</title> <style> .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .dialog { display: inline-block; vertical-align: middle; text-align: left; white-space: normal; } </style> </head> <body width="100%" height="100%" margin: 0; padding: 0;> <div class="container"> <div class="dialog"> <img src="xiaochengxu.jpg" width="100%"/> </div> </div> </body> <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><!--引用最新版腾讯JS--> <script> wx.config({ debug: false, appId: '***', timestamp: ***, nonceStr: '***', signature: '***', jsApiList: [ 'updateAppMessageShareData' ,'updateTimelineShareData' // API列表 ] }); //API内容 wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '阳光房宝小程序', desc: '阳光城·翡丽公馆项目位于贵州省毕节市中心城区-东城区板块，前靠毕节东客站...', link: 'http://720.gyxlck.com/yangguangfeicui/xcx.php', imgUrl: 'http://720.gyxlck.com/yangguangfeicui/logo.jpg', success: function () { // 设置成功 } }); }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateTimelineShareData({ title: '阳光房宝小程序', // 分享标题 link: 'http://720.gyxlck.com/yangguangfeicui/xcx.php', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: 'http://720.gyxlck.com/yangguangfeicui/logo.jpg', // 分享图标 success: function () { // 设置成功 } }); }); </script> |
可以通过这个链接查看具体效果：http://720.gyxlck.com/yangguangfeicui/xcx.php
而最近通过自己学习，我觉得这样写更直观：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lanluo CSS Center Demo</title> <style> h1,p{ text-align: center; } .pop{ width: 500px; height: 300px; border:1px solid rgb(0, 102, 255); background: white; position: fixed; left: 50%; top:50%; margin-top: -151px; margin-left: -251px; z-index: 999; } .pop h2{ text-align: center; margin: 5px; background: lightskyblue; line-height: 40px; } .mask{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: black; z-index: 998; opacity: 0.1; /* 设置透明度 */ filter: alpha(opacity=10); } .pop_con{ display: none; } </style> </head> <body> <h1>This is a Website</h1> <p>We will test the content center</p> <div class="pop_con" style="display: block;"> <div class="pop"> <h2>This is a pop title</h2> <p>This is pop concent</p> </div> <div class="mask"> </div> </div> </body> </html> |
效果如下图：
也可以通过这个链接看看具体效果：https://blog.lanluo.cn/wp-content/uploads/2020/03/juzhong.html
上面一个方法在PC/WAP都很不错，下面一个我自己写的就比较适合PC上。
重新检查了代码，修复了路径错误，现在打开能正常播放了
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/8389
微信扫一扫 
支付宝扫一扫 
