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

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" >
        <button >
            <i > </i>
        </button>
        <video id="vid1" width=600 height=300 controls style="width: 100%;height: 100%;"  preload="auto">
            <source :src="url" type="video/mp4">
        </video>
</div>

any suggestions ?

CodePudding user response：

you can set the button to absolute like this:

<button
        >
        <i > </i>
</button>