问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

移动端页面内容撑不开 垂直居中有问题

头像
John
    2261032
    <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="format-detection" content="telephone=no,email=no" />
        <title>提示</title>
        <style type="text/css">
            *{margin: 0;
            padding: 0}
        body{
            position: relative;
            width: 100%;
            height: 100%;
        }
        
            .center{
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }
        </style>
    </head>

    <body>
        <div class="center">
            <p>6666666666666</p>
        </div>
    </body>

</html>
    html5cssjavascript
    阅读 2.4k
    3 个回答
    得票最新
    头像
    ゆきにゃ
      67149
      html {height:100%}

      楼下的flex布局在移动端也是一个很好的选择。（vh 相对于视窗的高度，视窗高度是100vh）
      不过有一点贴主可能理解有误，
      元素高度百分比需要向上遍历父元素要找到一个定值高度才能起作用，
      你的body设置了100%，但是html没有高度，所以高度无法撑满页面。
      html的上级为浏览器窗口，设置了100%就获取到了浏览器的高度。

      头像
      Donle
        1.4k1113
        <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no" />
  <title>提示</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0
    }

    .main {
      display: flex;
      width: 100%;
      min-height: 100vh;
    }

    .center {
      align-items: center;
      display: flex;
      text-align: center;
      width: 100%;
    }

    p {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="center">
      <p>6666666666666</p>
    </div>
  </div>
</body>

</html>
        头像
        XiuBug
          8.5k1016
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题