Question

我需要像这样在居中div的右上方放置一个项目：

.fullscreenholder {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -960px;
  margin-top: -540px;
  width: 1920px;
  height: 1080px;
  border: 10px solid #ff0000;
}

<div class="fullscreenholder">example</div>

当div较大时，为什么窗口的顶部和左侧会被裁剪？有没有办法对付或检测到这种情况，从而不影响div中的项目（使它消失）？

----编辑----

这是我根据@CodeSpent的答案最终使用的。在我的情况下，该站点是一个自助服务终端，因此大型站点无需考虑移动访问。

<div class="wrapper">

    <div class="fullscreenholder">
        <div class="menubuttons">button1 | button2</div>
    </div>

</div>


.wrapper
{
    background-color: #ff0000;
    display: flex;
    justify-content: space-around;
    width: 100vw;
    height: 100vh;
 }

.fullscreenholder
{
    background-color: #00ff00;
    margin: auto;
    width: 1920px;
    height: 1080px;
    border: 10px solid #ff0000;
}

.menubuttons
{
    background-color: #0000ff;
    display: inline;
    right: 0px;
    top: 0px;
    width: 260px;
    height: 30px;
    z-index: 9;
}

Answer 1

需要考虑的几件事；

查看此图像时，并不是每个人都具有1920x1080的分辨率。
absolute定位应仅用于分层类型的事物，因为absolute完全忽略了流程。
您要实现的目标实际上是Flexbox的完美案例。

.fullscreenholder {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  height: 100vh;
  border: 10px solid #ff0000;
}

.fullscreenholder h1 {
  margin: auto;
}

<div class="fullscreenholder">
  <h1>Example</h1>
</div>

这里重要的是什么？

我将您的width和height属性分别更改为100vw和100vh。这意味着无论屏幕大小如何，它都会占据垂直高度的100％和垂直宽度的100％，也就是全屏。
将fullscreenholder和display:flex;做成一个弹性容器。
给您的h1 margin:auto;，它告诉flexbox以一定的余量占据元素周围的所有空间，使您的h1完全垂直和水平居中。

Answer 2

您是否正在寻找类似的东西？

.fullscreenholder {
  position: absolute;
left: 0;
top: 0;
margin-left: 0;
margin-top: 0;
width: 1920px;
overflow: visible;
padding: 10px;
height: 1080px;
border: 10px solid #ff0000;
}

<div class="fullscreenholder">example</div>

Answer 3

首先，使用百分比将.fullscreenholder元素设置为相对于视口定位，这将确保不管屏幕大小如何，该元素始终保持居中，并使用transform将其位置偏移其自身大小。

如果您希望该巨大的div正常运行，则还需要为主体设置一个最小尺寸。

我不知道您为什么需要这种方式，但这是您的操作方式：

（顺便说一句，如果您需要在所有屏幕上使它看起来都“不错”，则应将.fullscreenholder的宽度和高度更改为max-width和max-height，然后将其宽度设置为：100％，高度设置为100％，这将使行为具有响应性）

body {
  position: relative;
  min-width: 1920px;
  min-height: 1080px;
}

.fullscreenholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
  height: 1080px;
  border: 10px solid #ff0000;
  overflow: hidden;
  color: #fff;
}

.inside {
  position: absolute;
  width: 200px;
  height: 200px;
  right: 0;
  top: 0;
  background: blue;
  color: #fff;
}

<div class="fullscreenholder">
  <div class="inside">example</div>
</div>

居中div内的CSS定位

3 个答案: