Open In App

How to Center a Div using CSS?

Last Updated : 15 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Here are three methods to center a div horizontally, vertically, and both horizontally and vertically using CSS.

Center a div Horizontally

Here are three methods to center a div horizontally:

1. Using margin Property

The margin: auto; property automatically centers a block-level element within its container horizontally.

HTML 
<html>
<head>
    <style>
        .center {
            margin: auto;
            width: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="center">Horizontally Centered</div>
</body>
</html>
  • The margin: auto; centers the div horizontally by distributing equal margin on both sides.

2. Using Flexbox

Flexbox makes it easy to align elements horizontally in a container.

HTML 
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
        }
        .center {
            width: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Horizontally Centered</div>
    </div>
</body>
</html>
  • display: flex; and justify-content: center; center the div horizontally within the container.

3. Using CSS Grid

CSS Grid offers another simple way to horizontally center an element.

HTML 
<html>
<head>
    <style>
        .container {
            display: grid;
            justify-items: center;
        }
        .center {
            width: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Horizontally Centered</div>
    </div>
</body>
</html>
  • display: grid; defines a grid container.
  • justify-items: center; centers the child div horizontally within the grid.

Center a div Vertically

Here we will center the div vertically to the viewport of the webpage.

1. Using Flexbox

Flexbox allows for easy vertical centering within a container.

HTML 
<html>
<head>
    <style>
        .container {
            display: flex;
            align-items: center;
            height: 100vh; 
        }
        .center {
            width: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Vertically Centered</div>
    </div>
</body>
</html>
  • align-items: center; centers the child div vertically within the flex container.
  • height: 100vh; ensures the container occupies the full viewport height.

2. Using CSS Grid

CSS Grid provides a straightforward method for vertical centering.

HTML 
<html>
<head>
    <style>
        .container {
            display: grid;
            align-items: center;
            height: 100vh; /* Full viewport height */
        }
        .center {
            width: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Vertically Centered</div>
    </div>
</body>
</html>
  • align-items: center; centers the child div vertically within the grid container.
  • height: 100vh; ensures the container spans the full viewport height.

3. Using Positioning and Transform

This method uses absolute positioning combined with transform for vertical centering.

HTML 
<html>
<head>
    <style>
        .container {
            position: relative;
            height: 100vh; /* Full viewport height */
        }
        .center {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Vertically Centered</div>
    </div>
</body>
</html>
  • top: 50%; positions the top edge of the div at 50% of the container's height.
  • transform: translateY(-50%); shifts the div up by 50% of its own height, achieving vertical centering.

Center a div both Horizontally and vertically

Here we center the div both horizontally and vertically to the viewport of the webpage.

1. Using Flexbox

Flexbox can center elements both horizontally and vertically with minimal code.


HTML 
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; 
        }
        .center {
            width: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Centered</div>
    </div>
</body>
</html>
  • justify-content: center; centers the child div horizontally.
  • align-items: center; centers the child div vertically.

2. Using CSS Grid

CSS Grid allows for centering elements in both dimensions effortlessly.

HTML 
<html>
<head>
    <style>
        .container {
            display: grid;
            place-items: center;
            height: 100vh; /* Full viewport height */
        }
        .center {
            width: 200px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Centered</div>
    </div>
</body>
</html>
  • place-items: center; centers the child div both horizontally and vertically within the grid container.

3. Using Positioning and Transform

Combining absolute positioning with transforms can center a div in both directions.

HTML 
<html>
<head>
    <style>
        .container {
            position: relative;
            height: 100vh; /* Full viewport height */
        }
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Centered</div>
    </div>
</body>
</html>
  • top: 50%; and left: 50%; position the div's top-left corner at the center of the container.
  • transform: translate(-50%, -50%); shifts the div up and left by 50% of its own dimensions, centering it fully.

Next Article
How to center a <div> using CSS grid Property ?
author
harishcarpenter
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox