html - 如何根据父 div 使元素居中？

Question

我正在尝试在视频顶部添加一个大播放按钮。

视频本身是响应式的，我希望播放按钮始终在视频中水平和垂直居中。

会是这样的

 ---------------------------
|                           |
|                           |
|   play button in center   |  <----video
|                           |
|                           |
 ---------------------------

我有这样的东西:

<div style='text-align:center;'>
         <div id='playIcon'><img src='play.png'/></div> 
          <video id='video' >
              <source src=/video.mp4' type="video/mp4">
          </video>
        </div>
</div>

我的CSS

#video{
   width:100%;
   max-height:1200px;
   z-index: 1;
   background-color: black;
}

在这种情况下如何使播放按钮居中？

Answer 1

这是一个 fiddle :

http://jsfiddle.net/Bc4NP/

你需要添加 position:relative 到你的主 div:

<div style="text-align:center; position:relative">
    <div id="playIcon"><img src="play.png" /></div> 
        <video id="video">
            <source src="/video.mp4" type="video/mp4">
        </video>
    </div>
</div>

然后，将此样式添加到您的播放按钮:

#video{
   width:100%;
   max-height:1200px;
   z-index: 1;
   background-color: black;
}
#playIcon {
    position: absolute; 
    top: 47%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

现在您获得了精确的水平居中对齐和几乎精确的垂直对齐(您可以更精确地更改 top:47%)