HTML Centered Video - CSS

HTML5 has introduced a new way to embed videos on a webpage that is super easy and user-friendly. It is also very customizable through CSS. In this article, we are going to explore how we can center a video on a webpage using HTML and CSS.

HTML

We will start by building the HTML structure of our video. We will write a simple video tag with a source attribute inside it, like this:

<video controls>
   <source src="video.mp4" type="video/mp4">
</video>

In the above code, we have added the "controls" attribute to the "video" tag to provide basic control options to the user such as play, pause, etc. We have also added the "source" tag inside the "video" tag to specify the source of the video.

CSS

Now that we have built the HTML structure of our video, we can use CSS to center it on the webpage. There are a few ways to center a video, but we are going to use the "flexbox" method. Here is the CSS code to center our video:

video {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 500px;
}

In the above code, we have added the "display:flex" property to the video tag to make it a flex container. We have then used the "justify-content:center" and "align-items:center" properties to center the video both horizontally and vertically. We have also set a height of 500px to the video, but you can change it to your desired height.

Conclusion

In this article, we have learned how to center a video on a webpage using HTML and CSS. We have used the "flexbox" method to make it easy and user-friendly. You can apply this method to other elements on your webpage as well.

**注：** 返回代码片段：

``````markdown
# HTML Centered Video - CSS

HTML5 has introduced a new way to embed videos on a webpage that is super easy and user-friendly. It is also very customizable through CSS. In this article, we are going to explore how we can center a video on a webpage using HTML and CSS.

## HTML

We will start by building the HTML structure of our video. We will write a simple video tag with a source attribute inside it, like this:

In the above code, we have added the "controls" attribute to the "video" tag to provide basic control options to the user such as play, pause, etc. We have also added the "source" tag inside the "video" tag to specify the source of the video.

CSS

Now that we have built the HTML structure of our video, we can use CSS to center it on the webpage. There are a few ways to center a video, but we are going to use the "flexbox" method. Here is the CSS code to center our video:

video {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 500px;
}

In the above code, we have added the "display:flex" property to the video tag to make it a flex container. We have then used the "justify-content:center" and "align-items:center" properties to center the video both horizontally and vertically. We have also set a height of 500px to the video, but you can change it to your desired height.

Conclusion

In this article, we have learned how to center a video on a webpage using HTML and CSS. We have used the "flexbox" method to make it easy and user-friendly. You can apply this method to other elements on your webpage as well.