CSS居中实用指南

前端

使用CSS居中的问题不是关于记住justify-content: center;属性。更多的是与不同的布局结构有关的，它们有自己的规则，并且可能不尊重某种方法。

但是，首先，这篇指南是为谁创建的：

    1. 感到被CSS的“规则和条例”压倒的前端开发人员。
    1. 找不到使那个div永远居中的人。啊啊啊！
    1. 困在结构混乱的模板/主题中的网站所有者。

在CSS中，居中通常被称为垂直、水平或垂直和水平。

你也可以把它理解为左、右和左右。在某些情况下，你还可以看到它被称为上下。这些术语也将是我们在本指南中使用的术语。话虽如此，让我们从最受欢迎的方法开始。

内联与块级元素：text-align

最初可能不明显的一件事是，text-align: center;不仅适用于段落。作为一个属性，它可以应用于任何被视为块级的元素。这意味着只要你的内容被包裹在<div>或类似的元素中，就可以使用text-align居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.text-align-container {
  display: flex;
}
.text-align-container-style .item {
  background: #fff2ea;
  padding: 20px 0;
  text-align: center;
  width: 100%;
}
</style>

<div class="text-align-container text-align-container-style">
  <div class="item">Hi, I am centered.</div>
</div>

这种方法的好处是它适用于Grid和Flexbox。只要你将内容包裹在div中，它对于诸如图像之类的内容也可以正常工作。

另外，它在列表中也很有效：

让我们看看如果我们尝试将一个<span>元素居中，而不先将其包装在块级容器中会发生什么。

1
2
3
4
5
6
7
8
9
10
11
.span-demo-container {
  background: #fff2ea;
  padding: 20px 0;
  width: 100%;
}
.span-demo-center {
  text-align: center;
}
<div class="span-demo-container">
  <span class="span-demo-center">Am I in the center?</span>
</div>

结果是：

之所以这个<span>元素没有居中，是因为它是一个内联元素。对于内联元素，你总是想要设置一个父元素。

因此，如果我们回头并将span-demo-center类应用于<div>，结果将是这样：

如果你使用大量的代码库或使用结构混乱的模板，这通常是居中不起作用的第一个原因。因此，请始终检查块级和内联元素，并查看它们是否正确嵌套。

使用固定宽度居中块级元素

另一种居中元素的流行方法是使用margin: auto;，这在具有固定宽度的块级元素中最常用。

所以，想象一个大容器内的自定义div。然后，你试图将内容放入该自定义div元素并将其居中。

让我们做一个实际的例子来看它是如何运作的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.margin-auto-container {
  background: #fff2ea;
  padding:1rem;
}
.margin-auto-inner {
    width: 200px;
    padding: 1rem;
    background: #efba93;
    color: #fff;
    margin: 0 auto;
    text-align: center;
}
<div class="margin-auto-container">
  <div class="margin-auto-inner">Div & Text centered.</div>
</div>


在这个例子中，margin-auto-container class从这篇博文中取得容器，然后我们创建一个新class叫margin-auto-inner并对其应用了固定宽度的自定义样式。最后，我们应用margin: 0 auto;确保我们的内部容器相对于主容器始终居中。

为什么加了0呢？我们添加了0是因为我们希望保持垂直（上下）的边距不变，并在水平（左右）视图上应用自动边距。你可以更改这个值以指定单独的边距，例如"margin: 25px auto 50px;"，这将在顶部保留25px边距，并在底部保留50px边距。

重要提示：你的margin: auto;没有居中的原因是因为你没有为要居中的元素设置固定宽度。

我们还指定text-align: center;，因为这将使内部容器中的文本居中。

使用固定宽度居中内联元素

在内联元素的情况下，自定义设置的宽度会被忽略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.margin-auto-container {
  background: #fff2ea;
  padding:1rem;
}
.margin-auto-inner-span {
    width: 150px;
    padding: 5px;
    background: #efba93;
    color: #fff;
    margin: 0 auto;
    text-align: center;
}
<div class="margin-auto-container">
  <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span>
</div>

结果是：

正如你所看到的，尽管设置了margin: auto;，但span内联元素并未居中。

幸运的是，对此有一个简单的修复方法。通过向我们的margin-auto-inner-span类添加display: block;属性，我们可以告诉浏览器我们希望该特定元素被视为块级元素。现在它应该被居中了：

此时，你可能会想知道哪些HTML元素被视为块级元素，哪些被视为内联元素。可以理解的。我建议查看MDN.
如果你知道内联和块级之间的区别，找到适合你问题的居中解决方案就会更容易。”

Grid & Flexbox: 现代方式

网格（Grid）和弹性盒子（Flexbox）是现代网页设计中使用的两个布局模块。而Flexbox是一种一维布局系统，Grid则是基于二维方法的。

在这两种布局中，只需两行代码即可实现div的居中。

通用解决方案:Vertical & Horizontal

对于Grid和Flexbox布局，你可以使用place-content: center;属性。

1
2
3
4
5
6
.center-div-grid-layout {
   display: grid;
/* display: flex; */
   place-content: center;
}
<div class="center-div-grid-layout">It's that easy.</div>

place-content属性是align-content和justify-content的简写形式。

使用place-content，你可以做多种布局变化，取决于你正在处理的布局风格：

总的来说，只有极少数情况下，上述居中技术不足以满足需求。如果你正在使用古老的布局，最好的方法是在样式表中找到类名的不一致之处。然后找到一种适当的方法来正确嵌套元素，以便执行指定的居中逻辑。

绝对居中：transform

当你希望将某物居中“正中央”时，可以使用transform属性——水平和垂直（左、右、上、下）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.transform-example-container {
  height: 150px;
  position: relative; 
  background: #fff2ea;
}
.transform-example-container .transform-absolute {
  width: 300px;
  text-align: center;
  background: #efba93;
  color: #fff;
  top: 50%; 
  left: 50%; 
  transform: translateY(-50%) translateX(-50%); 
  margin: 0;
  padding: 10px 0; 
  position: absolute;
}
<div class="transform-example-container">
  <p class="transform-absolute">Example: CSS transform</p>
</div>


这通过将子元素的position设置为absolute来实现。

重要的是父元素必须具有相对位置，否则transform属性将使用主布局作为其父级。
我们使用top和left来相对于左上角设置位置。之后，可以使用translate()将元素拉入中心。
margin和padding应设置为0，否则会出现位置偏移。
如果你想精通使用CSS进行居中——启动你喜爱的代码编辑器，开始测试这些示例吧。

涅槃快乐热爱生活，追求技术

个人简介。