How to Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS

Using this tutorial you will successfully complete the task of How to Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS Let’s go

We define the parent with display: flex property along with justify-content(horizontal placement by default) and align-items(vertical placement by default) center. These properties come with Flex specifications. One glitch to make this work is by providing a fixed width and height to the parent.

How to Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS

How to Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS

Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS pic

index.html

<style>
  body
{
  background-color: #fcfcfc;
}
.center-div
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 3px;
}
</style>
<div class="center-div"></div>

Read Also: Build a Flexbox Responsive Navigation Menubar in Browser Using HTML5 and CSS3

Final Words

We hope you find the How to Center Div on Page or Screen in Horizontal and Vertical Direction Using HTML and CSS. What to do if there are any issues with this article? Then ask through the comment section.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment