css - 实现 "Post Card Sized"网页的最佳方式

Question

如果我想创建一个内容与明信片大小相当的网页，我该如何在屏幕上定位它？

水平不是问题(边距自动)；但是，将其垂直居中是一个问题。

将容器垂直居中的最佳方式是什么？ Javascript？我是否应该尝试将其垂直居中，或者您通常更喜欢页面从顶部开始？

谢谢!

Answer 1

您可以使用 CSS 做到这一点。使用 50% 的左侧和顶部居中容器 DIV。然后只需将包含的明信片向后偏移其宽度和高度的 50%。

<div id="postcard_container">
    <div id="postcard">
    Postcard here
    </div>
</div>

#postcard_container {
    position:absolute;
    display:block;
    width:1px;
    height:1px;
    left:50%;
    top:50%;
}
#postcard {
    position:absolute;
    width:800px;
    height:600px;
    left:-400px;
    top:-300px;
}