Question

如何将我的div垂直放在膝上？（...）

body {padding: 4% 16%;}
body {top:0px; left:0px; bottom:0px; right:0px;}
body {border: 12px solid darkred; border-style: double;}
body {background-color: #FAFCB4;}
p {font-size: 80%; text-align: justify;}
@media only screen and (min-width:768px) { 
/* For desktop: */
body {position: absolute;}
body {padding: 6% 18%;}
p {font-size: 100%;}
}

<div style="margin:auto; max-width:525px;">
Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test.</div>

我试图让代码尽可能简单，因此我会使用直截了当的代码。谢谢你的帮助！

Answer 1

另一个人回答了您的媒体查询问题，但我想添加其他内容。

有一种更好的方法可以集中精力而不是解决定位问题。

div.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari and iOS */
  transform: translate(-50%, -50%);
}

欢迎你。

Answer 2

＆＃13;

    body {
      padding: 4% 16%;
      margin-top: 40%;
      margin-bottom: auto;
      border: 12px double darkred;
      background-color: #FAFCB4;
    }

    p {
      font-size: 0.8em; /* You should be using "em"*/
      text-align: justify;
    }

    @media only screen and (min-width:768px) { 
    /* For desktop: */
    body {position: absolute;
      padding: 6% 18%;
    }
    p {
      font-size: 1em;
    }

＆＃13;

    <div style="margin:auto; max-width:525px;">
    Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test.</div>

＆＃13;

你应该尝试使用＆＃34; em＆＃34;而不是字体大小的百分比。用户将设置字体大小，em的值为1或该大小的100％。实际上，.8 em是用户字体大小的80％。详情＆＃34; em＆＃34;可以在这里找到：（http://www.w3schools.com/cssref/css_units.asp）

此外，您可以在css中的一个元素中编写多个样式。您将来希望这样做，因为它是CSS中更有效，更高效的样式方法。

最后，我保留了@ 40％的顶级元素。这假设您的元素，您真正居中的将是页面的大约10-20％。如果是10％，则行：

       margin-bottom:auto;

这会将底部边距自动设置为剩余的50％，大致以元素为中心。添加或减去40％，直到您在垂直方向上设置样式。如果你的元素是20％，你将完全居中。干杯!希望能帮助到你！ ;）

Answer 3

您可以像这样在CSS3中使用Flexbox。

// To make sure body has the full viewport width and height
html {
    height: 100%;
    width: 100%;
}
// Styles for the div container. In this case it's the body, which is not good practice
body {
    height: 100%;
    width: 100%;
    // Make the container a Flexbox
    display: -webkit-flex;
    display: flex;
    // Align horizontal
    justify-content: center;
    // Align vertical
    -webkit-align-items: center;
    align-items: center;
}

如果你真的只想要它用于笔记本电脑，你需要将css规则包装在内：

// Non-Retina Screens
@media screen
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
}

// Retina Screens
@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) { 
}

Answer 4

每个人都已经讨论了针对笔记本电脑的Media Query限制。

对于垂直对齐，另一个选项使用table和table-cell的CSS显示属性，而vertical-align则在不知道容器高度的情况下居中。

CSS-Tricks上有一篇文章。

在div-tops上垂直居中div

4 个答案: