我想在视频中心没有固定宽度的div,所以如果窗口调整大小,div会随之缩小但仍然在中心.我使用左边的当前设置接近正确:50%,半负边距.问题显然是在负边际固定时向左移动.有任何想法吗?谢谢!
我的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%; }
这是FIDDLE
解决方法
这可以通过使用transform:translate(-50%,– 50%);
通过使用它,内部元素可以是动态的(不需要负边距),请参见此示例
通过使用它,内部元素可以是动态的(不需要负边距),请参见此示例