在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 移動(dòng)端頁面內(nèi)容撐不開 垂直居中有問題

移動(dòng)端頁面內(nèi)容撐不開 垂直居中有問題

<!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>
回答
編輯回答
詆毀你

推薦:CSS(3)多種方法實(shí)現(xiàn)水平垂直居中效果

看看常見的垂直居中方法，這個(gè)也是面試經(jīng)常會(huì)問的知識(shí)點(diǎn)！

2018年1月23日 14:09
編輯回答
舊時(shí)光
<!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>
2018年6月26日 08:42
編輯回答
毀與悔
html {height:100%}

樓下的flex布局在移動(dòng)端也是一個(gè)很好的選擇。（vh 相對(duì)于視窗的高度，視窗高度是100vh）
不過有一點(diǎn)貼主可能理解有誤，
元素高度百分比需要向上遍歷父元素要找到一個(gè)定值高度才能起作用，
你的body設(shè)置了100%，但是html沒有高度，所以高度無法撐滿頁面。
html的上級(jí)為瀏覽器窗口，設(shè)置了100%就獲取到了瀏覽器的高度。

2018年1月11日 13:57