共计 5709 个字符，预计需要花费 15 分钟才能阅读完成。
“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直 居中。” –Jams Anderson
之前在给阳光房宝做小程序码的时候就需要在微信中上下左右居中，因为平时很少自己写前端，所以搜索了一些前辈的方法
最终我用的是下面这样的代码：
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
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://cdn.lanluo.cn/wp-content/uploads/2020/03/juzhong.html
上面一个方法在 PC/WAP 都很不错，下面一个我自己写的就比较适合 PC 上。
重新检查了代码，修复了路径错误，现在打开能正常播放了
正文完
