如何使用 LESS 实现水平垂直居中
在前端开发中，实现水平垂直居中一直是一个常见的问题。经过多年的发展，LESS 已经成为了前端开发领域中一个热门的 CSS 预编译工具。本文将会详细介绍如何使用 LESS 实现水平垂直居中。
- 使用 Flexbox 实现水平垂直居中
Flexbox 是 CSS3 引入的一种布局模型。使用 Flexbox 可以很方便的实现水平垂直居中。在 LESS 中，使用 Flexbox 实现水平垂直居中可以使用下面的代码：
.container {
display: flex;
justify-content: center;
align-items: center;
}在上面的代码中，我们定义了一个 container 类名，将其设置为 flex 布局，并且指定了 justify-content 和 align-items 属性，这两个属性分别表示水平和垂直居中。其中 justify-content 属性用于水平居中，取值为 center，align-items 属性用于垂直居中，同样的取值为 center。
- 使用绝对定位实现水平垂直居中
另外一个实现水平垂直居中的方法是使用绝对定位。在 LESS 中，使用绝对定位实现水平垂直居中可以使用下面的代码：
-- -------------------- ---- ------- ---------- - --------- --------- - -------- - --------- --------- ----- ---- ---- ---- ---------- --------------------- -
在上面的代码中，我们先定义了一个 container 类名，将其设置为相对定位。然后我们定义了一个 content 类名，将其设置为绝对定位，并且使用 left 和 top 属性将其移动到容器的中心。最后我们使用 transform 属性实现微调，translate(-50%,-50%) 表示将元素向左向上移动自身宽高的一半，以实现完美的水平垂直居中。
需要注意的是，使用绝对定位实现水平垂直居中需要将容器设置为相对定位，否则无法实现居中。
- 使用 table-cell 实现水平垂直居中
另外一个实现水平垂直居中的方法是使用 table-cell。在 LESS 中，使用 table-cell 实现水平垂直居中可以使用下面的代码：
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}在上面的代码中，我们定义了一个 container 类名，将其设置为 table-cell 布局，并且设置了 text-align 和 vertical-align 属性，text-align 属性用于水平居中，取值为 center，vertical-align 属性用于垂直居中，同样的取值为 middle。
需要注意的是，使用 table-cell 布局需要将容器设置为 display: table，否则无法实现居中。
总结
使用 LESS 实现水平垂直居中有多种方法，本文介绍了三种常见的方法：Flexbox、绝对定位和 table-cell。不同的情况下，我们可以选择不同的方法来实现水平垂直居中。希望本文能够帮助读者更好的理解如何使用 LESS 实现水平垂直居中，提升前端开发能力。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ---- ----------------
-------
---------- -
------ ------
------- ------
------- --- ----- -----
-
-- -- ------- -------- --
--------------- -
-------- -----
---------------- -------
------------ -------
-
-- -------------- --
------------------- -
--------- ---------
-
----------------- -
--------- ---------
----- ----
---- ----
---------- ---------------------
-
-- -- ---------- -------- --
---------------- -
-------- ------
-
----------- -
-------- -----------
----------- -------
--------------- -------
-
--------
-------
------
-------- ---- -------------
------ ------- -------------
---- ---------------- ----------------
--------- ------- --------------
------
-----------------------
---- ---------------- --------------------
---- -----------------------------------------------
------
------ ---------- -------------
---- ---------------- -----------------
---- ----------------------- ---------- --------------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64634caf968c7c53b04504a9