固定宽高元素在 Flexbox 容器中的居中方法
Flexbox 是一种 CSS 布局模式，强大的 Flexbox 容器可以让我们轻松地实现各种布局。但是在某些情况下，当我们想要在 Flexbox 容器中居中一个具有固定高度和宽度的元素时，我们遇到了一些挑战，特别是在处理较小的元素时。 下面是一些常用的方法来解决这个问题。
方法一：使用 margin
可以通过在 Flexbox 容器的子元素上应用 margin 属性来实现元素的垂直和水平居中。例如，将子元素的 margin 设置为 auto 可以将其水平居中：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ------ ------- ----- -
这里，justify-content 属性将子元素水平居中，而 align-items 属性将子元素垂直居中。但是需要注意，这个方法只适用于当子元素的大小是已知的，否则会出现难以预料的结果。
方法二：使用 transform
transform 属性可以通过 translate() 函数来实现元素的垂直和水平居中。例如，将子元素的 transform 设置为 translate(-50%, -50%) 可以将其水平和垂直居中：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ------ --------- --------- - ------------- - -------- --- -------- ------------- ------- ----- --------------- ------- - ------------ - -------- --- -------- ------------- ------- ----- --------------- ------- - ----- ---- - -------- ------------- --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -
这里，使用了伪元素在子元素的上面和下面创建了一个高度为 100% 的空白元素，然后将 text 内容用 span 标签包裹，将 span 标签设置为相对定位，然后使用 transform 来水平和垂直居中 span 标签。这样，即使子元素的大小未知，也可以使用这种方法来居中元素。
方法三：使用 flexbox
通过将子元素的垂直和水平居中设置为一个新的 Flexbox 容器，可以将元素垂直和水平居中。例如，将子元素放入一个新的 Flexbox 容器中并将其设置为垂直和水平居中：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ------ -------- ----- ---------------- ------- ------------ ------- -
这里，子元素变成了一个新的 Flexbox 容器。通过设置子元素的 display 属性为 flex，并设置 justify-content 和 align-items 属性为 center，可以使子元素垂直和水平居中。这种方法可以适用于所有子元素的大小。
结论：
这些方法可以轻松地实现固定宽高元素在 Flexbox 容器中的居中。但是需要注意的是，在使用这些方法时需要考虑子元素的大小和要求的效果，以此来选择最佳的方法。祝愿您用得愉快！
示例代码：
<div class="container"> <div class="item">Hello World</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------ ----- ------- ----- - ----- - ------ ------ ------- ------ ------- --- ----- ----- ----------------- -------- ----------- ------- ------------ ------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e538fe9a7045d0d682a50