...

display:flex;justify-content: center;检查侧轴是否居中，比如古代竖着写字，检查字是否在每条竹简的中央。 display:flex;align-items: center;检查横轴是否居中 ...

...

示例代码如下： ...

flex布局时的居中问题 flex-direction: column，元素竖行显示，主轴的位置会变换，横轴竖轴互换，设置水平居中需要行排列时的垂直居中 align-items: center;会使元素水平居中，justify-content: center;则会使元素垂直居中 ...

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。 ...

内容，只需要父元素设置 /* 设置弹性容器 */ display: flex; /* 设置主轴居中 */ justify-content: center; /* 设置侧轴居中 */ align-items: center; ...

方法一： align-self（解决父元素下面单个子元素布局方式） 父级加上 子元素 这种方法仅仅适应于外层元素中只包含一个子元素，或者子元素是独占一行的，因为这个时候对子元素进行设置宽度是无效的,设置了 flex-grow: 1；会是如下的效果 ...