Flexbox 如何实现垂直水平居中-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实现垂直水平居中是一个常见的需求。在过去，为了实现这个任务，需要使用固定宽度和高度的仿好方法，这种方法不仅过于繁琐，而且不够灵活。随着 Flexbox 技术的出现，实现垂直水平居中变得变得更加简单高效。本文将会详细讲解 Flexbox 如何实现垂直和水平居中，以及一些实用技巧和示例代码。

1. Flexbox 基础知识

1.1 什么是 Flexbox

Flexbox 是一种新的 CSS 布局技术，它可以使元素更加灵活地在容器内布局。利用 Flexbox，你可以轻松地实现对元素的对齐方式、排列顺序、尺寸等属性的控制，使布局更加简洁、灵活。

Flexbox 的理念是将容器看做一个有弹性的容器，其中的元素可以根据需要进行扩展或收缩，以最好的方式填满可用空间。同时，Flexbox 还提供了许多属性，可以帮助我们实现元素的对齐、伸缩和排序等操作，这使得我们能够更加方便地进行元素布局的处理。

1.2 基本概念

Flexbox 中有以下基本概念：

容器(container)：指包含一组子元素的父级容器。
项目(item)：指容器内的子元素，这些元素将通过 Flexbox 排列。
主轴(main axis)：指 Flexbox 最主要的方向，称作主轴。对于横向布局而言，主轴就是横向的；对于纵向布局而言，主轴就是纵向的。
交叉轴(cross axis)：交叉轴是相对于主轴的垂直方向。对于横向布局而言，交叉轴就是纵向的；对于纵向布局而言，交叉轴就是横向的。

1.3 Flexbox 布局属性

display: flex 设置容器为 Flexbox 布局。
flex-direction 定义主轴的方向。
justify-content 定义项目在主轴上的对齐方式。
align-items 定义项目在交叉轴上的对齐方式。

2. 实现垂直居中的方法

2.1 父元素定义 Flexbox 布局

我们可以为包含待对齐元素的容器设置 display 属性为 flex，这样容器就可以成为 Flexbox 容器，从而使用 Flexbox 进行布局，具体实现方式如下：

<div class="container">
  <div class="box">待居中元素</div>
</div>

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

justify-content 属性可以定义子元素在容器主轴方向上的位置，设置为 center 意味着在容器中居中。
align-items 属性可以定义子元素在容器交叉轴方向上的位置，也同样设置为 center 即可将子元素垂直居中。

2.2 父元素绝对定位

我们还可以为父元素设置 position:absolute，这样在继承了一个 position:absolute 的父级容器内，可以使用 top, left, bottom, right 属性来对子元素进行定位操作，具体实现如下：

<div class="container">
  <div class="box">待居中元素</div>
</div>

-- -------------------- ---- -------
-----------
  --------- ---------
-

-----
  --------- ---------
  ---- ----
  ----- ----
  ---------- --------------- ------
-展开代码

将父元素的 position 属性设为 relative，是为了子元素能够基于父容器来定位，而不是相对于页面的坐标系。
子元素的 position 属性必须设置为 absolute，上下左右则需要使用定位（top，left，bottom，right）属性进行调整。

2.3 使用 table-cell

我们也可以将父容器定义为 display: table，然后子元素定义为 display: table-cell，通过 vertical-align 的设置进行垂直居中，具体实现如下：

<div class="container">
  <div class="box">待居中元素</div>
</div>

-- -------------------- ---- -------
-----------
  -------- ------
  ------- -----
-

-----
  -------- -----------
  ------- -----
  --------------- -------
-展开代码

设置父元素为 display:table，是为了让父容器能够像表格一样，拥有垂直的居中方式，子元素定义为 table-cell 则可以百分百套住容器。
vertical-align 属性对 table-cell 进行垂直居中的时候非常好用，可以将子元素对齐到单元格的中部位置。

3. 实现水平居中的方法

3.1 父元素定义 Flexbox 布局

在实现水平居中的时候，我们可以同样将父容器定义为为 Flexbox 布局，让子元素在水平方向上进行居中。具体实现如下：

<div class="container">
  <div class="box">待居中元素</div>
</div>

.container{
  display: flex;
  justify-content: center;
}

.box{
  /* 不设置任何 margin，都可以进行水平居中 */
}

和垂直居中一样，通过将父元素设置为 Flexbox 布局，然后为其设置 justify-content 属性为 center，就可以使子元素在水平方向上居中了。
对于子元素则不需要进行任何特殊的 margin 和 padding 调整。

3.2 父元素绝对定位

和垂直居中的方法类似，我们可以将父元素设置为 position:absolute，为其设置 left 和 right 的值可以实现将其左右对齐，具体实现方法如下：

<div class="container">
  <div class="box">待居中元素</div>
</div>

-- -------------------- ---- -------
-----------
  --------- ---------
-

-----
  --------- ---------
  ----- ----
  ---------- -----------------
-展开代码

子元素继承了父亲的 position:relative，可以基于其进行定位操作。
子元素的 margin 设置为 auto，通过 margin:auto 实现水平居中。

4. 实现居中的实践技巧

4.1 让样式更加简洁易懂

一般来说，将子元素进行水平和垂直居中，我们常常需要在样式中添加多个属性，对于初学者和新手而言，这样写起来会比较困难。因此，我们可以采用一个小技巧，将多个属性缩写成一个 align-center 属性：

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

通过这样的方式，我们可以为元素添加一个 align-center 类，并在样式表中定义 display:flex，justify-content:center，align-items:center 来实现水平和垂直居中操作的同时，也让样式表更加易于理解。

4.2 利用 justify-content 的其他属性

除了 center 之外，justify-content 还有其他的属性可以使用：

flex-start：弹性项目向行头紧挨着排列。
flex-end：弹性项目向行尾紧挨着排列。
space-between：弹性项目在两端对齐，空白处平均分布。
space-around：弹性项目在连续的行之间平均分布，同时在首尾两端各有一半的空白。

.container {
  display: flex;
  justify-content: space-around;
}

可以通过使用这些属性，为容器内的元素定义水平对齐方式。

4.3 子元素相对定位

父容器设为 position:relative 的相对定位，子元素设为 position:absolute 的绝对定位通过 top 和left 来实现垂直和水平的居中。

<div class="container">
  <div class="box">待居中元素</div>
</div>

-- -------------------- ---- -------
---------- -
  --------- ---------
-
---- -
  --------- ---------
  ---- ----
  ----- ----
  ---------- --------------- ------
-展开代码

在实际开发中，我们经常需要通过 CSS 来实现垂直和水平居中的操作。利用 Flexbox 技术，我们可以轻松地实现这个目标，让我们更加方便地创建灵活和美观的页面。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ca6050e46428fe9e2758cd

Flexbox 如何实现垂直水平居中