Flexbox 布局下解决水平垂直居中问题的 11 种方法

在前端开发中，设计师和开发者经常需要实现元素的水平垂直居中。在 Flexbox 布局出现之前，实现这一效果往往需要使用复杂的 CSS 技巧，但是现在，使用 Flexbox 布局可以轻松实现这一效果。本文将介绍 11 种方法，详细讲解每种方法的实现原理和使用场景，并提供示例代码供读者参考。

方法一：使用 flex 容器的 align-items 和 justify-content 属性

这种方法是最基本的方法，只需要将父元素设置为 flex 容器，然后设置 align-items 和 justify-content 属性即可。其中，align-items 属性用于设置垂直居中方式，justify-content 属性用于设置水平居中方式。

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

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

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

方法二：使用 margin 属性

这种方法比较简单，只需要将元素的 margin 设置为 auto 即可。但是需要注意的是，该方法只适用于元素的宽高已知的情况。

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

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

方法三：使用绝对定位和 transform 属性

这种方法需要将元素设置为绝对定位，然后使用 transform 属性进行居中。其中，translate 属性可以设置元素相对于父元素的偏移量，从而实现居中效果。

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

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

方法四：使用绝对定位和 margin 属性

这种方法与方法三类似，也需要将元素设置为绝对定位。但是不同的是，使用 margin 属性进行偏移量的设置。

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

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

方法五：使用 table 属性

这种方法需要将父元素设置为 table，子元素设置为 table-cell，然后使用 vertical-align 和 text-align 属性进行居中。

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

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

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

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

方法六：使用 line-height 属性

这种方法需要将父元素的 line-height 属性设置为与其高度相等的值，然后将子元素的 line-height 属性设置为 1，即可实现垂直居中。

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

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

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

方法七：使用 calc 函数

这种方法需要使用 calc 函数计算出元素的偏移量，从而实现居中效果。

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

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

方法八：使用 grid 布局

这种方法需要将父元素设置为 grid 容器，然后使用 justify-items 和 align-items 属性进行居中。

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

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

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

方法九：使用 flexbox 布局的 order 属性

这种方法需要将父元素设置为 flex 容器，然后使用 order 属性将子元素的顺序改变，从而实现居中效果。

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

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

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

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

方法十：使用 flexbox 布局的 flex-grow 属性

这种方法需要将父元素设置为 flex 容器，然后使用 flex-grow 属性将子元素的高度设置为与父元素相等的值，从而实现垂直居中。

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

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

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

方法十一：使用 flexbox 布局的 align-self 属性

这种方法需要将父元素设置为 flex 容器，然后使用 align-self 属性将子元素进行垂直居中。

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

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

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

总结

以上是 Flexbox 布局下解决水平垂直居中问题的 11 种方法。不同的方法适用于不同的场景，开发者可以根据具体情况选择合适的方法。Flexbox 布局是现代前端开发中不可或缺的一部分，掌握其相关知识对于开发者来说非常重要。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650d0f6a95b1f8cacd6d1b30

阅读全文

猜你喜欢

  • 使用 Istio 和 Kubernetes 进行微服务应用开发的实践

    随着云原生技术的发展，微服务架构已经成为了现代应用开发的主流。Istio 和 Kubernetes 是目前最流行的云原生技术之一，它们的出现使得微服务架构的开发和管理变得更加容易和高效。

    1 年前
  • 打造 Vue.js SPA 应用之 Webpack 基础配置

    在现代前端开发中，Webpack 已经成为了必不可少的工具之一。它可以将多个模块打包成一个或多个文件，从而提高前端性能和开发效率。而对于 Vue.js 单页应用程序（SPA），Webpack 更是不可...

    1 年前
  • MongoDB 性能优化及调优实践

    前言 随着互联网的发展，数据量越来越大，对于数据库的性能要求也越来越高。MongoDB 作为一款非关系型数据库，具有高性能、高可伸缩性等特点，被越来越多的企业所采用。

    1 年前
  • ES6 Promise 技术解析与应用场景说明

    什么是 Promise Promise 是一种异步编程解决方案，它的特点在于让异步操作更加方便和易读。Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已...

    1 年前
  • 如何使用 Emmet 在无障碍事件监听器中应用 ARIA？

    在现代 Web 开发中，无障碍性（Accessibility）是一个非常重要的话题。为了让所有的用户都能够方便地访问我们的网站，我们需要遵循一些无障碍性的最佳实践。

    1 年前
  • Vue.js 中 vuex 的基本使用方法及其常见问题解决

    Vuex 是 Vue.js 的官方状态管理工具，用于在组件之间共享状态。它采用了集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

    1 年前
  • Next.js 代码瘦身专题（1）：优化 GraphQL 查询

    前言 在前端开发中，我们经常会遇到代码瘦身的问题。特别是在使用 Next.js 进行开发时，由于其 SSR（服务器端渲染）的特性，我们需要更加注意代码性能和加载速度的问题。

    1 年前
  • Deno 源码解析之 V8 引擎如何集成

    前言 Deno 是一个新兴的 JavaScript 运行时环境，它的目标是取代 Node.js。Deno 采用了 Rust 语言来编写，并且集成了 Google 的 V8 引擎。

    1 年前
  • Jest 单元测试实战教程：如何测试 Hapi.js 应用

    单元测试是前端开发中不可或缺的一环，它可以帮助我们在开发过程中及时发现问题并提高代码质量。本文将介绍如何使用 Jest 进行单元测试，并以 Hapi.js 应用为例进行实战演练。

    1 年前
  • Hapi 框架中路由参数校验的工具 joi 使用详解

    在前端开发中，参数的校验是非常重要的一环。在 Hapi 框架中，我们可以使用 joi 这个工具来对路由参数进行校验，保证数据的正确性和完整性。本文将详细介绍 joi 工具的使用方法，并提供示例代码。

    1 年前
  • Koa 中读取 POST 请求 body 数据的方法

    Koa 是一个基于 Node.js 的 web 开发框架，它的设计理念是中间件，可以让开发者轻松地实现各种功能。在 Koa 中，读取 POST 请求 body 数据是一项基本的操作，本文将介绍 Koa...

    1 年前
  • Fastify 中的服务降级与限流方案

    前言 在实际的生产环境中，服务的高可用性是非常重要的。为了保证系统的稳定性和可靠性，我们需要一些手段来应对突发情况，比如服务的高并发请求、网络拥堵等等。在本文中，我们将介绍 Fastify 中的服务降...

    1 年前
  • Flex 布局下的滚动条问题及解决方案

    介绍 Flex 布局是现代前端开发中常用的一种布局方式，它可以让我们更方便地对页面进行布局和排版。但是，当我们在使用 Flex 布局时，会遇到一些滚动条的问题，比如说当一个 Flex 容器的内容溢出时...

    1 年前
  • 解决跨域请求问题，实现前后端分离的 RESTful API 架构

    前言 在前端开发中，我们通常会遇到跨域请求的问题。跨域请求是指在当前页面中，向不同域名、不同端口、不同协议的服务器发送请求。由于浏览器的同源策略，跨域请求会被禁止，导致请求失败。

    1 年前
  • TypeScript 中的命名空间：为什么不要滥用

    在 TypeScript 中，命名空间是一种将代码组织到逻辑分组中的方式。它允许我们在不同的文件中定义相同名称的变量、函数和类，同时避免名称冲突。然而，在使用命名空间时，我们需要注意一些重要的细节，以...

    1 年前
  • Mongoose 集成 Redis 缓存的技巧

    在现代 Web 应用中，性能一直是至关重要的因素。缓存是提高应用性能的重要手段之一。在 Node.js 中，Redis 是一个流行的内存缓存解决方案。在本文中，我们将探讨如何将 Redis 集成到 M...

    1 年前
  • 如何使用 Material Design 组件库优化你的 Vue 应用

    Material Design 是 Google 推出的一套设计语言，旨在为移动和 Web 应用程序提供一致、美观和易于使用的界面设计。Material Design 组件库是一套基于该设计语言的前端...

    1 年前
  • Redis 使用中出现 “slot belongs to a different node” 如何处理？

    Redis 是一种开源的内存数据库，广泛应用于各种 Web 应用中。在使用 Redis 进行数据存储时，经常会遇到 “slot belongs to a different node” 的错误提示。

    1 年前
  • 通过 eslint 在项目中统一代码质量及风格

    在前端开发中，代码的质量和风格是非常重要的。不仅能提高代码的可读性和可维护性，还能减少代码出错的可能性。但是，当项目变得越来越大，开发人员越来越多时，如何保证代码的质量和风格呢？这时，我们就需要使用 ...

    1 年前
  • Babel 编译 ES6 代码时遇到 "SyntaxError: export 'default' (imported as 'xxx') was not found in 'xxx'" 的解决方法

    在前端开发中，我们经常使用 ES6 的语法来编写代码，但是有些浏览器还不支持 ES6，为了让我们的代码能够在这些浏览器上运行，我们需要使用 Babel 将 ES6 代码转换成 ES5 代码。

    1 年前

相关推荐

    暂无文章