如何在不使用最小高度的情况下在html页面中居中div答案

【问题标题】：How to center a div in html page without using min-height如何在不使用最小高度的情况下在html页面中居中div
【发布时间】：2022-11-16 17:13:16
【问题描述】：

我需要在页面中垂直居中一个 div

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

我的代码在哪里

<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>

我的 HTML 看起来像这样

<!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>

【问题讨论】：

标签： html css angular

【解决方案1】：

使用翻译属性

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

【讨论】：

他正在使用 Bootstrap，最好提供一个基于 bootstrap 的解决方案。

【解决方案2】：

对我来说，您只需省略父项中的嵌套 div。

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

【讨论】：

【解决方案3】：

将另一个类 h-100 添加到容器 div 以确保它适合主体。

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

【讨论】：

【解决方案4】：

显示网格还可以帮助您将项目垂直和水平居中

.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>

【讨论】：

【解决方案5】：

你可以像这样简单地将它居中：

  width: 100px;
  height: 100px;

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

  margin: auto;

这将使它在垂直和水平方向居中。如果只想垂直居中，只需使用 top 和 bottom填充:

padding: 70px 0;

【讨论】：