如何实现双向CSS居中（完整分步指南） _双向CSS居中实现方法

文章图片
【如何实现双向CSS居中（完整分步指南）】在使用 CSS 时，我们将页面元素视为盒子，这些盒子的排列呈现了 CSS 布局的概念。
自然地，每个页面元素在文档布局流中都有一个正常的位置。但通常，我们会更改默认行为以创建我们想要的确切布局。当我们想要将对象居中放置在文档中的另一个对象中时，就会发生这种情况。
这是开发过程中的常见任务，但多年来，这项任务似乎变得困难和复杂，尤其是在以垂直轴为中心时。
如何实现双向CSS居中？这使得开发人员求助于各种难以管理的技巧和变通方法，例如使用 CSS 表属性会导致浏览器中的不一致并在屏幕阅读器上失败，或者使用负边距的绝对定位，仅将指定宽度的对象居中。
另一个技巧是使用

position: 
absolute;

和transform属性使容器中的元素居中。但是，这种方法可能会创建笨拙的布局，并且每个容器只允许一个元素而无需额外工作。
本质上，开发人员根据任务使用不同的技巧来使对象居中，这就是居中对象的痛苦所在：解决方法太多。
然而，在现代 CSS 中，我们不再需要承受这种压力，因为我们现在可以更好地控制在双向布局中如何使对象居中。
在本指南中，我们将研究双向CSS居中实现方法，同时遵循最佳实践来居中在设备和屏幕上良好缩放的对象。
双向CSS居中实现教程：理解双向 CSS 居中顾名思义，双向居中的字面意思是“双向居中”。
在 CSS 上下文中，它被解释为在两个方向上居中对象，即水平方向，也称为主轴，垂直方向也称为交叉轴。
我们也可以将双向视为在两个相反方向上起作用并且不受流动方向影响的任何东西。
通过在 CSS 上下文中应用此概念，双向居中将不受更改布局流方向影响的对象居中。
换句话说，无论布局流程如何，即无论书写方向是否从左到右，对象都保持在中心ltr，就像英文文本一样；rtl, 像阿拉伯文字；或者当书写模式设置为时，如日语和蒙语。vertical-*
单向居中
如何实现双向CSS居中？单向居中涉及单向居中，这意味着将对象水平或垂直居中。在这种情况下，对象的中心对齐取决于布局流的方向。
让我们看一下单向居中的工作原理，以更好地了解双向居中的工作原理。
在这里，我们有一个生成以下布局的 HTML 标记：

< div class="container"> < div class="obj">Center this obj< /div> < /div>

文章图片
考虑到ltr书写方向，我们对对象进行了样式设置，以查看文档布局流中的初始位置。现在，通过在其容器内垂直居中对象，我们有以下内容：

文章图片
在这里，我们可以使用 CSS flex 将对象垂直居中：

.container { display: flex; align-items: center; /* ... */ }

现在，忽略代码并专注于对象定位。如果我们改变这个文档的书写方式或书写方向，对象的垂直居中对齐往往会受到影响。
下面的代码将书写模式更改为，就像我们在蒙古文中看到的那样：vertical-*

.container { /* ... */ writing-mode: vertical-lr; }

这个额外的样式产生了一个新的布局：

文章图片
我们可以看到，对象的居中对齐取决于布局流的方向，即单向居中。
另一方面，对于双向居中，无论布局流的方向如何，对象都必须保持在中心，如下所示。

文章图片
接下来，让我们看看如何实现这种类型的对象居中。
使用position和transform属性的对象居中双向CSS居中实现方法：如前所述，使用该方法被认为是一种遗留技术。但是使用这个技巧的本质是让我们看到局限性并更好地理解我们将在后面介绍的现代技术。

position: absolute;

让我们回顾一下我们之前的标记：

< div class="container"> < div class="obj">Center this obj< /div> < /div>

为了使容器内的子元素居中，我们可以简单地应用以下代码：

.container { position: relative; /* ... */ }.obj { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* ... */ }

通过使容器 a和元素居中 a意味着我们可以将元素移动到容器的中心（参见 CodeSandbox）。

position: 
relative;

position: 
absolute;

文章图片
使用此方法的一个限制是它通常每个容器只允许一个元素而没有其他样式。由于文本重叠，它还可能导致布局尴尬。
因此，我们将学习现代技术，而不是使用此 hack 或任何其他技巧。
使用 CSS flexbox 实现对象居中如何实现双向CSS居中？使用 CSS flexbox，我们可以轻松控制对象在另一个对象内的放置。当我们应用到父元素时，这意味着我们希望直接子元素成为弹性项目，以便我们可以应用对齐属性来控制项目。display: flex
同样，让我们??使用早期的 HTML 标记：

< div class="container"> < div class="obj">Center this obj< /div> < /div>

通过使容器元素成为 flex 容器并应用对齐属性，如下所示，我们使子元素完全居中于容器中（参见 CodeSandbox）：

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

文章图片
在垂直施加到柔性容器中心子元件，而中心在主轴线的元件，即，水平方向。

align-items:center;

justify-content: 
center;

这种方法相对于传统技术的优势之一是灵活性。我们可以将多个对象无缝地集中在一个容器中，仅此一项就可以提高代码的可维护性。
双向CSS居中实现教程：使用 flexbox 进行双向居中的实际示例
在处理页面的hero部分、弹出消息或居中叠加时，我们可以找到现实生活中的例子。
在本节中，我们将看到如何完美地将页面的主内容居中。让我们考虑以下标记：

< section class="hero"> < h1> < !-- ... --> < /h1> < p> < !-- ... --> < /p> < button>Contact us< /button> < /section>

为简洁起见，我们已从代码中删除了内容（参见 CodeSandbox）。
通过在父容器元素上应用 flex 和对齐属性section，我们让子元素完美地在容器中居中：

.hero { display: flex; align-items: center; justify-content: center; flex-direction: column; /* ... */ }

然后我们得到以下结果：

文章图片
在 CSS 代码中，我们在对齐属性旁边添加了一个使内容沿交叉轴的位置。

flex-direction: 
column;

这是因为 flexbox 是一种一维布局模型，这意味着它一次处理一维布局，行或列。并且，默认情况下，设置为，使内容位置沿主轴。flex-directionrow
通过添加，我们将默认值更改为垂直对齐。

flex-direction: 
column;

居中图像和内联元素
双向CSS居中实现方法：这种方法不仅适用于我们上面看到的居中文本块；我们还可以将图像和内联元素（如锚文本链接）居中。
在实际项目中，我们可能希望将图像和文本链接与其他文本块一起添加到中心。所以，让我们看看它的标记并实现 flexbox 方法来使内容居中：

< section class="hero"> < img src="https://www.lsbin.com/..." /> < h1>...< /h1> < p>...< /p> < a href="https://www.lsbin.com/#">...< /a> < /section>

同样，为了简洁起见，我们删除了元素的内容（参见 CodeSandbox）。使用相同的 flexbox 属性，我们的内容完全居中，如下所示：

文章图片
正如我们在 flexbox 中看到的，居中对象很简单且易于管理。这种方法非常灵活，我们可以在 flex 容器中添加或删除内容，并且仍然可以完美地居中，而无需额外的样式。
在我们实际项目中的几乎所有情况下，我们都会经常使用这种方法来使对象居中。
Flexbox 浏览器支持
所有现代浏览器都支持 Flexbox，因此我们可以放心地使用它来使布局中的对象居中。在此处查看当前浏览器支持。

文章图片
使用 CSS 网格的对象居中如何实现双向CSS居中？和 flexbox 一样，我们也可以将 a 应用到容器元素，这样直接子元素就变成了网格项。然后，我们可以使用对齐属性将容器内的内容居中。

display: grid;

以下 CSS 代码将对象置于容器中：

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

此 CSS 产生与 flexbox 示例相同的居中对齐方式（参见 CodeSandbox）。
在这里，我们只使用了两行 CSS。该CSS属性控制内容的对齐方式和合理的同时。并且，通过分配一个值，项目将在容器内居中对齐。place-contentcenter
的是简写和，这意味着我们可以重写上面的CSS看起来像这样：place-contentalign-contentjustify-content

.container { display: grid; align-content: center; justify-content: center; /* ... */ }

双向CSS居中实现教程：使用网格双向居中的实际示例
双向CSS居中实现方法：使用 flexbox 部分中介绍的相同hero示例，让我们改为应用以下网格样式：

< section class="hero"> < img src="https://www.lsbin.com/..." /> < h1>...< /h1> < p>...< /p> < a href="https://www.lsbin.com/#">...< /a> < /section>

然后我们有以下输出（参见 CodeSandbox）：

文章图片
如图所示，“联系我们”按钮采用周围内容的宽度。这是因为当 CSS属性应用于网格容器时，网格项会立即采用宽度最大的项的大小。place-content
与 flexbox 方法相比，这种效果带来了差异。现在，根据我们想要的布局，我们可以轻松决定使用这些方法中的哪一种。
但同样，在大多数情况下，我们将使用 flexbox 来居中对象，因为它可以无缝地生成我们想要的任何居中布局。
网格布局浏览器支持
网格与 flexbox 不同，浏览器支持较少。

文章图片
双向CSS居中实现教程结论我们现在无需使用包括不必要的遗留黑客在内的数十种技术来居中对象，而是拥有可用于居中任何类型对象的现代方法。
我们还介绍了现实生活中的示例和最佳实践，因此我们知道如何将它们应用到我们自己的项目中。
我希望你喜欢阅读本指南。如果你有任何问题或贡献，请在评论部分分享。最后，努力在网络上分享本指南。