How to center an element based on the parent div?

Question

I am trying to add a big play button on top of a video.

The video itself is responsive, and I want the play button to always be centered horizontally and vertically within the video.

It will be something like

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

I have something like:

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

My css

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

How do I center the play button this case?

Answer 1

Here is a fiddle:

http://jsfiddle.net/Bc4NP/

You need to add position:relative to your main 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>

And then, add this styles to your play button:

#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;
}

Now you get an exact horizontal center align, and almost-exact vertical align (you can be more precise changing top:47%)

Answer 2

Since you have text-align center on the parent, that is good. So it will center it horizontally. It will be hard to get it exactly centered on every screen size vertically, but you can use media queries to help with that for differnet sizes.

An example would be the following. Adjust accordingly.

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

Answer 3

Here is the code:

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

Here is the 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;
   }

Hope this works! PS: Replace the button with an image of a play button.

Answer 4

Add

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

to the div containing the image (add this to your css):

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

It is a pure CSS2 solution that doesn't require different parameters according to the boundaries of your div.

Demo