html - 居中 div 内的 CSS 定位

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>

这里有什么重要的？

1. 我将您的 width 和 height 属性分别更改为 100vw 和 100vh。这意味着它将占据 100% 的垂直高度 和 100% 的垂直宽度，也就是全屏，无论屏幕尺寸如何。
2. 使 fullscreenholder 成为带有 display:flex; 的 flex 容器。
3. 给你的 h1 margin:auto; 告诉 flexbox 用边距占据元素周围的所有空间，让你的 h1到完美的垂直和水平居中。