首先，说明flex布局。
具有Flex布局的元素称为Flex容器，简称为“容器”。 其所有子元素都会自动成为容器成员，成为flex项目(flex item )，简称为“项目”。
默认情况下，容器中存在两个轴：“水平主轴”(main axis )和“垂直相交轴”(cross axis )。 的开始位置(与边框的交点)称为主开始，结束位置称为主结束。 相交轴的开始位置称为cross start，结束位置称为cross end。 缺省情况下，项目沿主轴放置。 各个项目所占的主轴空间称为main size，所占的交叉轴空间称为cross size。
使用flex水平垂直居中对齐元素的两种方法：
html包括：
divclass=' father ' divclass=' son '/div/div第一个方法(新方法父元素)容器)将display属性设置为flex，并围绕水平主轴上的元素
*{ margin: 0； padding : }.father { width :400 px； height: 400px； border: 1px dashed black； 显示： Flex； /*父元素flex属性*/justify-content: center； /*水平主轴中央* /对齐- items : center； /*垂直相交轴的中央*/}.son{ width: 100px； height: 50px； 后台： pink； }第二种方法(旧方法父元素)容器)将display设置为-webkit-box，将水平主轴上的元素设置为中心，将垂直相交轴上的元素设置为中心。
*{ margin: 0； padding : }.father { width :400 px； height: 400px； border: 1px dashed black； 显示：-WebKit-box； -网络盒包：中心； - WebKit-box-align : center }.son { width :100 px； height: 50px； 后台： pink； }上述两种方法的效果相同，如下所示。
其实，这两种方法都是在父母要素中分三个阶段来实现的，但就个人而言，新方法更容易记住吧。 我建议使用第一种方法。