vue垂直布局_CSS水平垂直居中布局方案概述

在前端开发中，通过CSS实现布局容器的居中，也有诸多方法方式，当然也是CSS面试题中的经典面试题，在本文章中会系统的分析综述 通过 Flexbox 布局模块 与 CSS Grid布局模 实现容器的居中效果。

在传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性来实现基本布局，包括本文章的居中排列。

| CSDN| 网易云课堂教程 |

| 掘金| EDU学院教程 |

| 知乎| Flutter系列文章 |

本文章首发于微信公众号(biglead) 我的大前端生涯 ，同步刊登各技术论坛。

1 Flexbox中实现水平垂直居中

1.1 Flexible Box 的简述

在2009年，W3C提出出的 Flex 布局方案，Flex是Flexible Box的缩写，可意为”弹性布局”，任何一个容器都可以指定为Flex布局，可用来为盒状模型提供最大的灵活性。

采用Flex布局的元素，称为Flex容器(flex container)，以下称为 Flexbox ，Flex容器中的所有子元素称为Flex项目(flex item)。

任何一个容器都可以指定为Flex布局，如下所示：

.box{

display: flex;

}

或者是

.box{

display: inline-flex;

}

Flexbox 默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边