居中div元素的几种方法本文介绍了多种居中div元素的方法，包括水平居中和视图中居中。使用既有常用的 auto marg

使用auto margins居中元素

margin-left: center; margin-right: center 或者 margin-inline: center 或者 margin: center

注意margin: auto是对上下左右的margin设定为auto; 对于一些非从左到右读写的语言（如阿拉伯语是从右向左读，传统的汉语是从上到下读)，margin-inline根据页面的语言，页边距将自动应用到正确的一边。

这里的.element元素被包裹在可以改变宽度的app元素中。

在水平方向和数值方向居中元素：

对比上述的两种方法可以发现：使用margin:auto，当容器宽度小于被包裹的元素宽度时，被包裹的子元素的宽度会小于所需要的最大宽度(设定的max-width: fix-content)。(width 为固定长度时子元素的宽度不会改变）

使用flex居中元素，当容器宽度小于被包裹的元素宽度时，被包裹的子元素不会溢出，子元素仍会保留原来的长度（子元素设定的max-width: fix-content）

到目前为止，我们一直在研究如何在一个元素的父容器中居中。但是如果我们想在不同的上下文中集中一个元素呢？某些元素，如对话框、提示和横幅需要在视口中居中显示。

这是定位布局的领域，一种布局模式，当我们想要把一些东西从流中拿出来并锚定到其他东西上时使用。

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

此时需要父元素position 不是static

.card {
  position: fixed;
  inset: 0px;
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}

我们使用 position: fix，它将这个元素锚定到 viewport。可以把视窗想象成坐落在网站前面的一块玻璃，就像一列火车的窗户，显示着滚动的风景。position: fix的元素就像一只瓢虫落在窗户上。

接下来，我们设置 position: fix，这是一个将 top、 left、 right 和 bottom 全部设置为相同值0px 的简写。

只有这两个属性，元素就会扩展到填充整个视图，从每个边缘增长到0px。这在某些情况下是有用的，但这不是我们在这里要讨论的。我们需要约束它。

我们选择的确切值会根据不同情况的具体情况而有所不同，但通常我们想设置默认值(宽度和高度) ，以及最大值(最大宽度和最大高度) ，这样元素就不会在较小的视窗上溢出。

这里有些有趣的东西: 我们设置了一个不可能的条件。我们的元素不能是左边的0px 和右边的0px，并且只有12rem 宽(假设视口比12rem 宽)。我们只能选两个。但是！当设置margin:auto后，有趣的事情发生了。它改变浏览器解决不可能条件的方式; 它不锚定到左边缘，而是将其集中到中心。

而且，与 Flow 布局中的自动边距不同，我们可以使用这个技巧使一个元素在水平和垂直方向居中。这需要记住很多东西，但是这里有四个关键要素。

position:fixed 或者 position: absolute

锚定到所有4个边缘inset: 0

限制宽度和高度(设置初始宽度和最大宽度）

margin: auto

.container {
  display: grid;
  place-content: center;
}

您可能需要下面这样：

.container {
  display: grid;
  place-content: center;
  place-items: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox 在 viewport 将段落居中，但是它不影响单个字符，它们保持左对齐。我们需要用text-align 来居中文字。