flex-center.md

标题	标签
flex-center(弹性盒子布局的垂直水平居中)	flex,center(弹性盒子布局，居中)

弹性盒子布局的垂直水平居中。

• 通过设置元素的display属性为flex可以使用弹性盒子布局
• 使用align-items:center;以及justify-content:center;就能让元素水平垂直居中了

代码如下:

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /*这行代码不能少*/
}

<div class="flex-center"></div>

应用场景

来看一个模拟实现的官网的例子。

结果如下:

<iframe src="codes/css/html/flex-center.html"></iframe>