test
<html><head><style> /* Parent element can be any width and height */ .parent{ position: fixed; width: 100%; /* can be any width */ height: 100%; background: gray; text-align: center; } .parent:before{ /* pseudo element to force vertical centering of child element */ content: ''; display: inline-block; height: 100%; vertical-align: middle; } /* Centered child element can be any width and height */ .centeredchild{ display: inline-block; vertical-align: middle; width: 80%; /* can be any width */ background: #eee; } /* Video container to maintain Youtube 16:9 aspect ratio */ .videowrapper{ position: relative; padding-top: 25px; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; } /* Make Youtube IFRAME responsive */ .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style></head><body> <div class="parent"> <div class="centeredchild"> <div class="videowrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/SbQc_JLUH7k?rel=0" frameborder="0" allowfullscreen=""></iframe></div> This Youtube video is centered!</div> </div> </body></html>