Question

由于4k显示器是新生的，我需要从显示器的四个侧面对齐一个小页面。它由绝对定位的div组成，它们放在容器内。身体：

 <div id="mainArea">
    div elements containing text, images, links go here.


    </div>

css：

body {

background-image: url();


}

.mainArea {

position: absolute;

width: 882px; 

height: 420px;

left: 50%; top: 50%;
transform: translate(-50%, -50%);

我已经在互联网上尝试了一些建议，但它们基本上解决了简单内容的横向和纵向对齐，如文本或图像，而不是整个网站。这些在我的情况下不起作用，可能是由于我的经验不足。任何帮助表示赞赏。

Answer 1

使用position: absolute; width: 882px; height: 420px; left: calc((100vw - 882px ) / 2); top: calc((100vh - 420px ) / 2); transform: translate(-50%, -50%);：

{{1}}

CSS整页垂直和水平对齐

1 个答案: