Scribd
Upload
16 views9 pages

To Center A Div

NOTES

Uploaded by

vikram singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views9 pages

To Center A Div

NOTES

Uploaded by

vikram singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

To center a <div> element, you can use several techniques depending on the situation and how you

want to center it (horizontally, vertically, or both). Below are the common ways to center a div in
different contexts:

1. Centering Horizontally with CSS Flexbox

If you want to center the div horizontally:

2. Centering Both Horizontally and Vertically with Flexbox

To center the div both horizontally and vertically:

3. Centering Horizontally with Margin Auto

If you want to center the div horizontally:


4. Centering Both Horizontally and Vertically with Grid

Using CSS Grid to center both horizontally and vertically:

5. Absolute Positioning with CSS Transforms

To center a div both horizontally and vertically using absolute positioning:


1. Flexbox - Horizontal Centering

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>

.container {

display: flex;

justify-content: center;

height: 100vh;

background-color: lightblue;

.box {

width: 200px;

height: 100px;

background-color: coral;

</style>

</head>

<body>

<div class="container">

<div class="box">Centered Div</div>

</div>

</body>

</html>

2. Flexbox - Horizontal and Vertical Centering

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.container {

display: flex;
justify-content: center;

align-items: center;

height: 100vh;

background-color: lightgreen;

.box {

width: 200px;

height: 100px;

background-color: coral;

</style>

</head>

<body>

<div class="container">

<div class="box">Centered Div</div>

</div>

</body>

</html>

3. Margin Auto (Horizontal Centering)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.box {

margin: 0 auto;

width: 200px;

height: 100px;
background-color: coral;

</style>

</head>

<body>

<div class="box">Centered Div</div>

</body>

</html>

4. CSS Grid - Horizontal and Vertical Centering

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: grid;
place-items: center;
height: 100vh;
background-color: lightpink;
}

.box {
width: 200px;
height: 100px;
background-color: coral;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Centered Div</div>
</div>
</body>
</html>

5. Absolute Positioning with CSS Transforms

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.box {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 200px;

height: 100px;

background-color: coral;

body {

height: 100vh;

margin: 0;

background-color: lightyellow;

</style>

</head>

<body>

<div class="box">Centered Div</div>

</body>

</html>

6. Tailwind CSS - Centering with Tailwind

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="flex justify-center items-center h-screen bg-gray-100">

<div class="w-64 h-32 bg-coral">Centered Div</div>

</body>

</html>

You might also like