在前端开发中，通过CSS实现布局容器居中的方式有??很多种。当然也是CSS面试题中的一道经典面试题。本文将对其进行系统的分析和评述。Flexbox布局模块和CSSGrid布局模块实现了容器的居中效果。传统方案中，基于盒模型，依靠display属性+position属性+float属性实现基本布局，包括本文的居中排列。**你可能需要CSDN网易云课堂教程掘金EDU学院教程知乎Flutter系列文章1Flexbox中的水平和垂直居中1.1FlexibleBox简介2009年W3C提出了Flex布局方案。Flex是FlexibleBox的缩写，可以表示“灵活的布局”。任何容器都可以指定为Flex布局。可用于为盒子模型提供最大的灵活性。采用Flex布局的元素称为Flex容器（flexcontainer），以下简称Flexbox，Flex容器中的所有子元素称为Flex项（flexitem）。任何容器都可以指定为flex布局，如下：.box{display:flex;}or.box{display:inline-flex;}点这里查看CSS中flex和inline-flex的区别Flexbox默认存在两轴：水平主轴和垂直交叉轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend，如下图：1.2FlexibleBox子项居中对齐在Flexbox布局模块中，将其子项居中对齐（flexitems）居中（水平方向和垂直方向都居中），如下图1-1所示：1.2.1实现方式只设置flex容器的属性如图1-1中，只需要将justify-content和align-items的值设置为以flex容器为中心，就可以让元素在flex容器中水平和垂直居中，如下代码所示清单1-2所示：/*代码清单1-2*/
