将div动态居中放置在另一个div上 [英] dynamically center div over another div
问题描述
我希望将div居中放置在视频上,而没有固定的宽度,因此,如果调整窗口的大小,div会随之缩小,但仍会居中。我目前使用的设置接近正确,使用left:50%,负余量为一半。问题显然是当负边距固定时它向左移动。有任何想法吗?谢谢!
I'm looking to center a div without a fixed width over a video so if the window is resized, the div will shrink along with it but remain in the center. The current set up I have is close to correct using the left:50% with half negative margin. The issue is obviously that it moves left as the negative margin is fixed. Any ideas? Thanks!
我的HTML:
<div id = 'top-container'>
<video id='top-vid' autoplay loop width=100% height='auto' class='no-mobile'>
<source src='DS_Intro.mov' type='video/mp4'>
<source src='test.webm' type='video/webm'>
</video>
<div id = 'top-content'>
<div id = 'top-text'>
<div id = 'top-img'>
<img src='ds_white.png' width = "100%" height = 'auto'>
</div>
<h1 id = 'top-slogan'>a boutique video production studio</h1>
</div>
</div>
</div>
我的CSS:
#top-container{
width:100%;
height:100%;
}
#top-content{
max-width:1200px;
margin-right:auto;
margin-left:auto;
}
#top-img{
width:100%;
padding-bottom: 10%;
}
#top-slogan{
text-align:center;
padding-bottom:10%;
font-weight: 100;
color:#5DBCD2;
}
#top-text {
top: 50%;
left: 50%;
margin-left: -360px;
position:absolute;
width:50%;
}
这是字段
推荐答案
transform:translate(-50%,-50%);
通过使用此元素,内部元素可以是动态的(不需要负边距),请参见此示例
This is possible with the use of transform: translate(-50%, -50%);
By using this the inner element can be dynamic(no need for negative margin's), see this example
这篇关于将div动态居中放置在另一个div上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!