html - 居中 div 内的 CSS 定位

我需要在居中的 div 内的右上 Angular 放置一个元素，如下所示:

.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;
}

最佳答案

需要考虑的几件事；

不是每个人在观看时都会有 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; 成为一个 flex 容器。

给你的 h1 margin:auto; 它告诉 flexbox 用边距占据元素周围的所有空间，使你的 h1 完美地垂直和水平居中。

关于html - 居中 div 内的 CSS 定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51234624/