Как центрировать элемент на основе родительского 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

Вот скрипка:

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%)

Answer 2

Поскольку у вас есть центр выравнивания текста на родительском объекте, это хорошо. Поэтому он будет центрировать его горизонтально. Было бы трудно получить его в точности с каждым размером экрана по вертикали, но вы можете использовать медиа-запросы, чтобы помочь с этим для разных размеров.

Примером может служить следующее. Отрегулируйте соответствующим образом.

#playicon { 
    display: inline-block; 
    position: relative; 
    top: 40%; 
} 

Answer 3

Вот код:

<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> 
     <button id="bu">Play</button> 
</div> 

Вот CSS:

#video{ 
    width:200px; 
    max-height:150px; 
    z-index: -1; 
    background-color: black; 
    position:absolute; 
    top:0px; 
    left:0px; 
    } 
    #bu{ 
    position:absolute; 
    top:75px; 
    left:100px; 
    } 

Надеется, что это работает! PS: Замените кнопку изображением кнопки воспроизведения.

Answer 4

Добавить

position: relative; 
display: block; 
top: 50%; 
margin-top: -1000px; 
height: 2000px; 
text-align: center; 
line-height: 2000px; 

в DIV, содержащий изображение (добавить это к вашему CSS):

#playIcon 
{ 
    position: relative; 
    display: block; 
    top: 50%; 
    margin-top: -1000px; 
    height: 2000px; 
    text-align: center; 
    line-height: 2000px; 
} 

Это чистый раствор CSS2 что не требует разных параметров в соответствии с границами вашего div.

Demo