移動瀏覽器切斷內容底部，但在桌面瀏覽器的工作原理

Question

底部不斷在移動視圖得到削減，但在瀏覽器中完美的罰款，即使它的大小。我想也許媒體查詢沒有解決，但他們看起來很好。我試着移動.square增長將top:-55%;但它只會在桌面瀏覽器移動。由於某種原因，它不會在移動設備中移動。

 <meta name="viewport" content="initial-scale=1"> 

    /* Iphone */ 

    @media (min-width: 300px) and (max-width: 767px) { 
     .project_miniwrap { 
      min-width: 90%; 
      top: 33%; 
     } 
     #tu { 
      margin-top: 117px; 
      margin-left: 235px 
     } 
     #dar { 
      margin-top: 17px; 
      margin-left: 25px 
     } 
     .square { 
      color: #0D0D0D; 
      font-family: 'NimbusSansNo5TOT-Medium'; 
      font-size: 38px; 
      letter-spacing: -1px; 
      display: block; 
      margin: auto; 
      position: absolute; 
      top: -15%; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      width: 295px; 
      height: 160px 
     } 
     .l1, 
     .l2, 
     .l3, 
     .l4 { 
      position: absolute; 
      background: transparent; 
      width: 0px; 
      height: 0px; 
      background-color: black; 
      color: #0D0D0D 
     } 
     .l1 { 
      left: 0; 
      bottom: 0; 
      width: 8px 
     } 
     .l2 { 
      top: 0; 
      left: 0; 
      height: 8px 
     } 
     .l3 { 
      right: 0; 
      top: 0; 
      width: 8px 
     } 
     .l4 { 
      bottom: 0; 
      right: 0; 
      height: 8px 
     } 
     .description { 
      width: 90% 
     } 
     .snippet { 
      display: block; 
      width: 100%; 
      line-height: 45px; 
      margin-bottom: 10%; 
      font-size: 36px 
     } 
     .main_description { 
      display: block; 
      width: 100% 
     } 
     #anchor-point { 
      bottom: 90%; 
      position: absolute 
     } 
     .anchor-point { 
      bottom: 90%; 
      position: absolute 
     } 
     #container { 
      top: 30% 
     } 
    } 
    @media (max-height: 479px) { 
     #tu { 
      margin-top: 117px; 
      margin-left: 235px 
     } 
     #dar { 
      margin-top: 17px; 
      margin-left: 25px 
     } 
     .square { 
      color: #0D0D0D; 
      font-family: 'NimbusSansNo5TOT-Medium'; 
      font-size: 38px; 
      letter-spacing: -1px; 
      display: block; 
      margin: auto; 
      position: absolute; 
      top: -15%; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      width: 295px; 
      height: 160px 
     } 
     .l1, 
     .l2, 
     .l3, 
     .l4 { 
      position: absolute; 
      background: transparent; 
      width: 0px; 
      height: 0px; 
      background-color: black; 
      color: #0D0D0D 
     } 
     .l1 { 
      left: 0; 
      bottom: 0; 
      width: 8px 
     } 
     .l2 { 
      top: 0; 
      left: 0; 
      height: 8px 
     } 
     .l3 { 
      right: 0; 
      top: 0; 
      width: 8px 
     } 
     .l4 { 
      bottom: 0; 
      right: 0; 
      height: 8px 
     } 
    } 

網站：http://imdarrien.com/

Answer 1

我認爲它是被切斷，因爲視口高度不夠大。既然你.project_miniwrap使用top:35%;位置時，它總是會在這35％的從父的頂部位置，而不是在中心。

嘗試使用這種居中，而不是股利：

.project_miniwrap { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

這是上面的更兼容的版本，如果你知道的寬度和高度，你可以使用，否則就需要使用到居中JavaScript的。

.project_miniwrap { 
    top: 50%; 
    left: 50%; 
    width: 200px; 
    height: 300px; 
    margin-left: -100px; 
    margin-right: -150px; 
}