投稿
  1. 蓝洛水深Home
  2. 居中

居中

  • HTML通过CSS控制元素上下居中同时左右居中 网站

    HTML通过CSS控制元素上下居中同时左右居中

    之前在给阳光房宝做小程序码的时候就需要在微信中上下左右居中，因为平时很少自己写前端，所以搜索了一些前辈的方法 最终我用的是下面这样的代码：

    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 而最近通过自己学习，我觉得这样写更直…

    蓝洛水深的头像 蓝洛水深
    2020年3月26日
    01.0K0
联系QQ
联系QQ
SHARE
TOP