在前端日□□□常代码编□□□□写中，经常需要□□一些居中·方式，下面有几□□□□种常用方□□□法，让红色方△块垂直水□□□□平都居中□□□于黑色方□□块里。
 

1. 利用flex弹性布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
首先是作为弹性布局的容器的属性。　　
　　1.flex-direction属性
　　flex-direction决定了容器的方向。
div {
  flex-direction: row | row-reverse | column | column-reverse;
}
　　四个值分别为：row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。
　　2.flex-wrap属性
　　默认情况□□□下的布局✦一般在同□□一行，当设置了flex-wrap属性之后□□□□将自动将□□□排列不下□□□□的内容进□□□行换行。
div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
　　四个值分别为：nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。
　　3.flex-flow属性
　　flex-flow属性是以上两种属性的简写形式，默认值是row nowrap。
div {
  flex-flow: <flex-direction> || <flex-wrap>;
}
　　
　　4.justify-content属性
　　justify-content属性定义了在容器方向上的对齐方式。
div {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
　　flex-start(默认值)：向左对齐。
　　flex-end：向右对齐。
　　center： 居中对齐。
　　space-between：两端对齐，每一个子元素等距离间隔，子元素与容器边框无间隔。
　　space-around：每个子元❖素两侧的□□□间隔相等。子元素之□□□□间的间隔□□比子元素★与容器边◣框的间隔□□□大一倍。
　　5.align-items属性
　　align-items属性定义在垂直容器方向上的对齐方式。
div {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
　　flex-start：垂直方向的起点对齐。
　　flex-end：垂直方向的终点对齐。
　　center：垂直方向的中点对齐。
　　baseline: 与第一个子元素中文字的基线对齐。
　　stretch(默认值)：如果子元□□□素没有设□□□□置高度或□□者高度设◣为auto，那么它将丨占满整个□□□□容器的高□□□□度。
　　6.align-content属性
　　align-content属性定义了子元素两种方向上的对齐方式。
div {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。
　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。
　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。
　　space-between：当容器方△向子元素□□□□刚好填满□□时，垂直方向△两端对齐，子元素之□□间的等距□□离间隔。
　　space-around：两个方向▼两侧的间□□□□隔都相等。所以，轴线之间□□的间隔比□□□轴线与边◣框的间隔□□□大一倍。
　　stretch（默认值）：占满整个垂直方向。
 
任何一个容器都可以指定为Flex布局。
指定Flex的写法为：display:flex
接着添加横向居中属性：justify-content:center
垂直居中属性：align-items:center
即可使红色方块居中于黑色方块

2. 利用position定位实现居中

先将父元□□□素.container的position设置为relative,然后设置◈子元素.box的position为absolute;这样可以□□□使子盒子□□□根据父盒◈子的位置□□□□进行定位。
子元素.box还需设置top:0;right:0;bottom:0;left:0;margin:auto,即可居中于黑色方块。