我需要在居中的 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>


    这里有什么重要的?
  • 我将您的 widthheight 属性分别更改为 100vw 和 100vh。这意味着它将占据 垂直高度 的 100% 和 垂直宽度 的 100%,也就是无论屏幕大小如何,都是全屏显示。
  • 使用 fullscreenholder 使 display:flex; 成为一个 flex 容器。
  • 给你的 h1 margin:auto; 它告诉 flexbox 用边距占据元素周围的所有空间,使你的 h1 完美地垂直和水平居中。
  • 关于html - 居中 div 内的 CSS 定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51234624/

    10-12 00:17
    查看更多