How to center a div in html page without using min-height

Question

I need to center a div vertically in a page

<div class="d-flex align-items-center justify-content-center">
  <div class="w-100">
    <p>My Content Here</p>
  </div>
</div>

Where my code was

<div>
  <h2>My Content</h2>
</div>
<div class="d-flex align-items-center justify-content-center">
  <div class="w-100">
    <p>My Content Here</p>
  </div>
</div>
<div>
  <P>My Content</P>
</div>

My Html looks like this

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/cfm">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  <script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script>
</body>
</html>

score 1 · Answer 1 · answered Nov 16 '22 at 06:43

1

Use translate property

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

answered Nov 16 '22 at 06:43

Tushar Kumawat

653
9
22

He's using Bootstrap and it would be best to provide a bootstrap-based solution. – Microtribute Nov 16 '22 at 06:48

score 0 · Answer 2 · answered Nov 16 '22 at 06:44

0

For me, you'd just omit the nested div inside the parent.

<div class="d-flex align-items-center justify-content-center">
    <p>My Content Here</p>
</div>

answered Nov 16 '22 at 06:44

Dennis Quan

149
1
5

score 0 · Answer 3 · answered Nov 16 '22 at 06:47

0

Add another class h-100 to the container div to make sure it fits within the body.

<div class="d-flex align-items-center justify-content-center h-100">
    <div class="w-100">
        <p>My Content Here</p>
    </div>
</div>

answered Nov 16 '22 at 06:47

Microtribute

962
10
24

score 0 · Answer 4 · answered Nov 16 '22 at 06:51

Display Grid also helps you to center items both vertically and horizontally

.center {
  display: grid;
  place-items: center;
  min-height: 400px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <div class="d-flex align-items-center justify-content-center">
    <div class="w-100 center">
      <p>My Content Here</p>
    </div>
  </div>
</body>

</html>

score -1 · Answer 5 · answered Nov 16 '22 at 09:03

You can simply center it like this:

  width: 100px;
  height: 100px;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  margin: auto;

This will center it both vertically and horizontally. If you want to center it only vertically, use simply top and bottom padding:

padding: 70px 0;

Praveen Impaxive · Answer 6 · 2022-12-01T04:52:48.403

-1

<div class="d-flex flex-column" style="min-height: 100vh">
  <div>Head</div>
  <div class="d-flex align-items-center justify-content-center" style="flex: 100%">
    <p>Content Here</p>
  </div>
  <div class="mt-auto">Footer</div>
</div>

edited Dec 01 '22 at 04:52

answered Nov 16 '22 at 09:43

Praveen Impaxive

1
2

How to center a div in html page without using min-height

6 Answers6