什么是 Flexbox
Flexbox 是一种布局模式，可以实现灵活的容器布局，使得在不同分辨率和设备上都能够优雅地呈现。它是 CSS3 中的一项新特性，为开发者提供了一种更加简单、灵活的布局方式。
Flexbox 布局模型的核心是容器和其子元素。容器是包含子元素（即 Flex 子项）的 HTML 元素，而子元素是直接放在容器中的 HTML 元素。
实现不等高容器内元素垂直水平居中的技巧
方法一：使用对齐属性
Flexbox 提供了一系列对齐属性，包括 align-items 和 justify-content 等。这些属性可以帮助我们轻松地实现元素的水平垂直居中。
例如，以下代码中的 Flex 容器 div.container 拥有 display: flex 属性：
---- ------------------
---- -------------
-------------
------
------
-------
---------- -
-------- -----
------------ -------
---------------- -------
-
----- -
------- --- ----- ------
-------- -----
-
--------上述代码中的 .container 容器使用了 align-items 和 justify-content 属性，分别指定了项目在交叉轴和主轴上的对齐方式。这里我们把它们都设置为 center。而 .item 子元素通过设置 border 和 padding 属性，使它看起来更美观。
当我们在浏览器中预览时，可以看到 .item 元素已经处于 .container 容器居中的位置。
方法二：计算元素的尺寸
Flexbox 的另一个优势是它允许子元素在容器中按照比例布局，使得它们在不同的设备或者屏幕分辨率下都能够始终保持一致的尺寸和比例。
---- ------------------
---- ------------ ------------ ----
-------------
------
---- ------------ ------------ ----
--------------
------
------
-------
---------- -
-------- -----
------------ -------
---------------- -------
-
----- -
------- --- ----- ------
-------- -----
-
--------上述代码中，.container 容器内包含两个子元素 .item，通过给它们设置 flex 属性来规定它们在容器中所占据的比例。这里，第一个子元素占据容器的 1/3，第二个子元素占据容器的 2/3。
接着，我们可以通过计算元素的宽高，让它们在容器中实现水平垂直居中的效果：
---- ------------------
---- ------------ ------------ ----
-------------
------
---- ------------ ------------ ----
--------------
------
------
-------
---------- -
-------- -----
------------ -------
---------------- -------
--------- ---------
------- ------
-
----- -
------- --- ----- ------
-------- -----
--------- ---------
---- ----
----- ----
---------- --------------- ------
-
--------通过上述代码，我们给 .container 容器设置了一个固定高度为 350px，并在其内部放置了两个子元素，这两个元素按照 1:2 的比例占据了容器的比例。
接着，我们通过 position: absolute; 将 .item 子元素设置为绝对定位，并使用 top: 50%; 和 left: 50%; 把它们放到容器的中心位置。此时 .item 元素已经处于容器中心，但并不是垂直居中的。
最后，我们可以使用 transform: translate(-50%, -50%); 根据元素尺寸的宽高比例来计算 top 和 left 的偏移量，从而获得元素水平垂直居中的效果。
总结
CSS Flexbox 强大而灵活，可以实现复杂的布局效果。在实现不等高容器内元素垂直水平居中的时候，我们可以使用 Flexbox 提供的对齐属性或者计算元素尺寸的方法。无论是哪种方法，都可以帮助我们实现灵活且美观的页面布局。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6488349d48841e98946b688c