我需要在居中的 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;
}
最佳答案
需要考虑的几件事;
absolute
定位应该只用于分层类型的东西,因为 absolute
完全忽略流。 .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/