如何在CSS中使任何元素居中显示：7种始终有效的方法

.login {
padding: 40px;
background: white;
border: 2px solid #333;
}


输出结果

为什么这种方法有效

Flexbox将容器及其子元素视为一个灵活的布局系统，会自动根据主轴和交叉轴的方向来分配空间。因此，无论元素的尺寸如何，都可以轻松地被放置在容器的中间位置。这种特性使得Flexbox非常适合用于居中显示模态窗口、标题栏或其他动态内容。

无论在以下何种情况下，这种方法依然有效：

• 未知的高度

• 未知的宽度

• 响应式布局

• 动态内容

正因如此，它如今被广泛使用。

实际应用案例

开发人员通常会利用Flexbox来实现元素的中心对齐，从而将重要的界面元素放置在屏幕的正中央。例如，这种方法可以用来使模态对话框、加载提示符、标题栏内容以及其他全屏UI组件处于居中位置。因此，无论屏幕尺寸如何变化，这些元素都能保持视觉上的平衡，也更容易被用户注意到。

方法4：使用CSS Grid进行中心对齐（最简单的方法）

CSS Grid提供了最为简洁的方式，用于实现元素的水平和垂直居中。只需将容器的样式设置为display: grid;，并应用place-items: center;，就能用短短几行代码将任何子元素精确地放置在屏幕中央。这种方法之所以有效，是因为Grid提供了内置的对齐控制功能，能够自动处理沿两个轴的方向进行定位的操作。

示例

<div class="wrapper">
  <div class="box">>已经居中！</div>>
</div>

.wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
}
.box {
  width: 200px;
  padding: 30px;
  text-align: center;
  background: white;
  border: 2px solid #333;
}

输出结果

在这个示例中，.wrapper充当网格容器，而.box元素则成为网格中的一个个单元格。place-items: center;这一属性会自动将.box元素在容器的水平和垂直方向上居中排列。

100vh表示占据视口高度的100%，也就是浏览器窗口可见区域的全部高度。当为容器设置height: 100vh;时，该容器会从上到下填充整个屏幕。

为什么这种方法有效

place-items: center这一属性实际上是由两个CSS Grid对齐属性组合而成的简写形式：

align-items: center;
justify-items: center;

• align-items用于控制元素在网格中的垂直对齐方式。

• justify-items用于控制元素在网格中的水平对齐方式。

通过将这两种方法结合在一条代码中，就可以自动实现元素在两个方向上的居中，而无需额外的布局规则。

何时优先使用网格布局而非弹性布局

当您只需要简单的元素居中效果，且不需要复杂的布局控制时，CSS网格布局是理想的选择。这种布局方式能让代码保持简洁易读。

在以下情况下使用网格布局：

• 只需对单个元素进行居中处理时

• 不需要构建复杂的布局结构时

• 希望代码尽可能简单明了时

在以下情况下使用弹性布局：

• 需要同时对多个元素进行对齐时

• 布局方向非常重要（例如横排与竖排的区别）时

• 需要精确控制元素之间的间距时

方法5：使用绝对定位结合变换实现居中

这种方法通过绝对定位结合CSS变换来实现元素的居中，即使不使用弹性布局或网格布局，该方法也同样有效。具体来说，只需将元素的`position`属性设置为`absolute`，然后通过`top: 50%;`和`left: 50%;`将其移动到其父元素的中间位置即可。

示例：居中弹出窗口

<div class="container">
  <div class="popup">>我被居中了
</div>

.container {
  position: relative;
  height: 400px;
}

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

输出结果

原理说明

1. `top: 50%;`将元素的顶部边缘移动到中间位置

2. `left: 50%;`将元素的左侧边缘移动到中间位置

3. `translate(-50%, -50%);`将元素整体向相反方向移动其宽度与高度的一半，从而使其真正居中

这样，元素的实际中心点就会与其边界对齐，而不是其角落。

补充说明

不使用变换时的情况：如果直接使用绝对定位，元素的左上角会成为居中点。

为了解决这个问题，就需要使用`transform: translate(-50%, -50%);`这条指令，它会使元素向相反方向移动其宽度与高度的一半，从而使其真正居中于容器内部。开发人员经常利用这种技术来制作弹出窗口、工具提示框或浮动UI组件。

实际应用案例

• 模态窗口

• 工具提示

• 浮动标签

• 覆盖层

方法6：使单行文本在容器中垂直居中

这种方法通过使用line-height属性，使容器内的单行文本实现垂直居中。当你将line-height设置为与容器高度相同的值时，浏览器会将该文本放置在该空间的垂直中心位置，因为行框会自动扩展以均匀填满整个容器。

示例：在按钮中居中文本

<button class="btn">>点击我</button>

.btn {
  height: 60px;
  line-height: 60px;
  text-align: center;
}

输出结果

原理说明

这种技巧最适合用于高度固定的元素，比如按钮、徽标或导航项。不过，只有当文本仅占一行时，这种方法才能可靠地发挥作用；如果文本分多行显示，垂直对齐就会失效。

局限性

使用line-height来实现文本的垂直居中的主要局限在于：该方法仅适用于单行文本。如果文本需要分多行显示，那么每行的line-height就无法与容器的高度保持一致，从而导致垂直对齐效果失效。

因此，这种方法并不适合用于段落、标题或任何可能超过一行长度的内容。它更适合用于按钮、标签等高度固定且仅包含单行文本的元素。

方法7：单元格布局法（虽古老但依然有用）

这种方法利用表格单元格的布局原理，使内容在垂直和水平方向上都实现居中。对于较老版本的CSS布局或电子邮件模板来说，这是一种非常可靠的技术。只需将容器的display属性设置为table;，其子元素的display属性设置为table-cell;，同时为该子元素添加vertical-align: middle;和text-align: center;，浏览器就会将这个子元素视为一个表格单元格，并自动将其内容居中显示。

示例

<div class="outer">
  <div class="inner">>居中的文本
 

.outer {
  display: table;
  width: 100%;
  height: 300px;
}

(inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

width: 300px;
margin: auto;

height: 100vh;

parent { position: relative; }

flex-direction: column;