how to make a button centered vertically and horizontally with tailwind ？

Question

I want to build a video player UI with tailwind, the play button should be centered in the middle of the player container.

I tried to code but it still failed

<div style="width: 600px;height:300px" class="flex items-center justify-center">
        <button class="w-72 h-72 rounded-full  bg-blue-500 hover:bg-red-500 text-white">
            <i class="el-icon-video-play text-2xl"> </i>
        </button>
        <video id="vid1" width=600 height=300 controls style="width: 100%;height: 100%;" class="video-js vjs-default-skin" preload="auto">
            <source :src="url" type="video/mp4">
        </video>
</div>

any suggestions ?

Answer 1

you can set the button to absolute like this:

<button
        class="absolute w-16 h-16 rounded-full bg-blue-500 hover:bg-red-500 text-white">
        <i class="el-icon-video-play text-2xl"> </i>
</button>