将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

http://jsfiddle.net/Mfsfm/2/

这篇关于将div动态居中放置在另一个div上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！