css - How do I center an HTML5 video horizontally and vertically in a bare bones HTML document? -
this question has answer here:
let's have very simple html page single html5 video element. it's source code is:
<html> <head> <title>{title}</title> </head> <body> <video height="{height}" width="{width}" controls=""> <source src="{source}" type="{type}"/> </video> </body> </html> what can center video element both horizontally , vertically in web browser? i'd prefer css solution or @ least solution uses little in way of hackish techniques possible, i'll take can get.
use following css make video element center vertically , horizontally.
video { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
Comments
Post a Comment